JSFiddle - React, Tailwind, and code Playground

by muhammadarsalansiddiqui

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>Jquery DataTable | Bootstrap Based Admin Template - Material Design</title>
    <!-- Favicon-->
    <link rel="icon" href="../../favicon.ico" type="image/x-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">

    <!-- Bootstrap Core Css -->
<!--    <link href="../../plugins/bootstrap/css/bootstrap.css" rel="stylesheet">-->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Waves Effect Css -->
    <link href="../../plugins/node-waves/waves.css" rel="stylesheet" />

    <!-- Animation Css -->
    <link href="../../plugins/animate-css/animate.css" rel="stylesheet" />

    <!-- JQuery DataTable Css -->
    <!--<link href="../../plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css" rel="stylesheet">-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.0/css/colReorder.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.4/css/rowReorder.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.0.0/css/scroller.bootstrap.min.css"/>
<!--<link rel="stylesheet" type="text/css"...

JavaScript

//php

<?php
include 'moo-konnection.php';
if ( $_SERVER["REQUEST_METHOD"] == "POST" ){
if ( isset($_REQUEST) ){


$requestData= $_REQUEST;


$columns = array(
    0 =>'username',
    1 => 'email',
    2=> 'phone1'
);

$sql = "SELECT id,username, email, phone1 FROM web_managers";
$query=mysqli_query($moo_conn, $sql);

//$result2 = $moo_conn->query($sql);

$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData;

$searchKeyWord = htmlspecialchars($requestData['search']['value']);

if( !empty($searchKeyWord) ) {
    $sql.=" WHERE username LIKE '".$searchKeyWord."%' ";
    $sql.=" OR email LIKE '".$searchKeyWord."%' ";
    $sql.=" OR phone1 LIKE '".$searchKeyWord."%' ";
    $query=mysqli_query($moo_conn, $sql);
    $totalFiltered = mysqli_num_rows($query);

}

$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]."   ".$requestData['order'][0]['dir']."   LIMIT ".$requestData['start']." ,".$requestData['length']."   ";
$query=mysqli_query($moo_conn, $sql);


$data = array();
while( $row=mysqli_fetch_array($query) ) {
    $data[] = [ 
''=>$row[''],
'id'=>$row['id'],
'username'=>$row['username'],
'email'=>$row['email'],
'phone1'=>$row['phone1'] 
]; }



$json_data = array(
    "draw"            => intval( $requestData['draw'] ),
    "recordsTotal"    => intval( $totalData ),
    "recordsFiltered" => intval( $totalFiltered ),
    "data"            => $data
);

echo json_encode($json_data);






$moo_conn->close();
}
}
?>