2017-02-17 5 views
1

私は日付範囲のピッカーでdatatableを行った、私はこれらの日付のpcikersでデータをフィルタリングしたい。動作しません。誰も助けることができる場合は、私を助けてください日付範囲ピッカーPHPとAJAXを使用して私のデータテーブルをフィルタリング

<?php 
/* Database connection start */ 
$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "my_db"; 

$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error()); 

/* Database connection end */ 


// storing request (ie, get/post) global array to a variable 
$requestData= $_REQUEST; 


$columns = array( 
// datatable column index => database column name 
    0 =>'id', 
    1 => 'time', 
    2=> 'computer_name', 
    3=> 'user' 
); 

// getting total number records without any search 
$sql = "SELECT id, time, computer_name,user "; 
$sql.=" FROM my_table"; 
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get my_table"); 
$totalData = mysqli_num_rows($query); 
$totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows. 


$sql = "SELECT id, time, computer_name,user"; 
$sql.=" FROM my_table WHERE 1=1"; 
if(!empty($requestData['search']['value'])) { // if there is a search parameter, $requestData['search']['value'] contains search parameter 
    $sql.=" AND (id LIKE '".$requestData['search']['value']."%' ";  
    $sql.=" OR time LIKE '".$requestData['search']['value']."%' "; 
    $sql.=" OR computer_name LIKE '".$requestData['search']['value']."%' "; 
    $sql.=" OR user LIKE '".$requestData['search']['value']."%')"; 
} 

$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get my_table"); 
$totalFiltered = mysqli_num_rows($query); // when there is a search parameter then we have to modify total number filtered rows as per search result. 
$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; 
/* $requestData['order'][0]['column'] contains colmun index, $requestData['order'][0]['dir'] contains order such as asc/desc */  
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get my_table"); 

$data = array(); 
while($row=mysqli_fetch_array($query)) { // preparing an array 
    $nestedData=array(); 
     $nestedData[] = $row["id"]; 
    $nestedData[] = $row["time"]; 
    $nestedData[] = $row["computer_name"]; 
    $nestedData[] = $row["user"]; 

    $data[] = $nestedData; 
} 



$json_data = array(
      "draw"   => intval($requestData['draw']), // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw. 
      "recordsTotal" => intval($totalData), // total number of records 
      "recordsFiltered" => intval($totalFiltered), // total number of records after searching, if there is no searching then totalFiltered = totalData 
      "data"   => $data // total data array 
      ); 

echo json_encode($json_data); // send data as json format 

?> 

<head> 
    <link type="text/css" href="css/jquery-ui.css" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript" language="javascript" src="css/jquery.dataTables.min.js"></script> 
    <script type="text/javascript" language="javascript" src="css/jquery-ui.js"></script> 

</head> 

<body> 
    <form id="mytable"> 
     <div class="container"> 

      <table border="0" cellspacing="5" cellpadding="5"> 
       <tbody> 
        <tr> 
         <td>Minimum Date:</td> 
         <td><input name="min" id="min" type="text" class="datepicker" onchange="getval();"></td> 
        </tr> 
        <tr> 
         <td>Maximum Date:</td> 
         <td><input name="max" id="max" type="text" class="datepicker" onchange="getval();"></td> 
        </tr> 
       </tbody> 
      </table> 


      <table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"> 
       <thead> 





        <tr> 
         <th>ID</th> 
         <th>TIME</th> 
         <th>COMPUTER NAME</th> 
         <th>USER</th> 
        </tr> 
       </thead> 
      </table> 




     </div> 
    </form> 
</body> 

<script> 
    $(document).ready(function() { 

     var dataTable = $('#employee-grid').DataTable({ 
      "processing": true, 
      "serverSide": true, 
      "ajax": { 
       url: "employee-grid-data.php", // json datasource 
       type: "post", // method , by default get 

       error: function() { // error handling 
        $(".employee-grid-error").html(""); 
        $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>'); 
        $("#employee-grid_processing").css("display", "none"); 

       } 

      } 
     }); 



     $('.datepicker').datepicker({ 
      autoclose: true, 
      format: "yyyy-mm-dd", 
      todayHighlight: true, 
      orientation: "top auto", 
      todayBtn: true, 
      todayHighlight: true, 
     }); 



     // var table = $('#employee-grid').DataTable(); 

     // Event listener to the two range filtering inputs to redraw on input 

    }); 

    function getval() 
    { 

     $.ajax({ 
      url: "employee-grid-data.php", // json datasource 
      type: "post", // method , by default get 
      data: {minimum: $("#min").val(), maximum: $("#max").val()}, 
      error: function() { // error handling 
       $(".employee-grid-error").html(""); 
       $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>'); 
       $("#employee-grid_processing").css("display", "none"); 

      } 

     }); 






    } 
</script> 

従業員グリッドdata.php

index.phpをここに私のコードを共有しています。私は

私は、少なくとも私はuがなるだろう願っていたデータを検索して支援するコードの下に推測

答えて

0

やアイデアを得ていない、多くのことを試してみました

var dataTable = $('#employee-grid').DataTable({ 
      "processing": true, 
      "serverSide": true, 
      "ajax": { 
       url: "employee-grid-data.php", // json datasource 
       type: "post", // method , by default get 

       error: function() { // error handling 
        $(".employee-grid-error").html(""); 
        $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>'); 
        $("#employee-grid_processing").css("display", "none"); 

       } 

      } 
     }); 

$('#min').keyup(function(){ 
     dataTable.search($(this).val()).draw() ; 
}) 
関連する問題