个人中心
gpt4 book ai didi

php - 使用日期范围选择器 php 和 ajax 过滤我的数据表

转载 作者：行者123 更新时间：2023-11-30 22:04:14 25 4
gpt4 key购买 nike

我已经用日期范围选择器完成了数据表，我想用这些日期选择器过滤数据。但没有工作。我在这里分享我的代码

index.php

<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>

employee-grid-data.php

<?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

?>

如果有人可以帮助，请帮助我。我尝试了很多，没有得到

最佳答案

我想下面的代码至少可以帮助搜索数据，希望你能从中得到一个想法

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() ;
})

关于php - 使用日期范围选择器 php 和 ajax 过滤我的数据表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42289649/

25 4 0
文章推荐： mysql - AWS DMS 添加一个新列来跟踪更改
文章推荐： python - 当所有输入的功能相同时如何获得按钮的唯一 XPATH
文章推荐： python - 系列的 Groupby 和 max
文章推荐： python - python 中的幻方
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com