Question

当我使用AJAX在同一个表中加载新数据时，我正在尝试重新初始化DataTable表。我需要使用新的分页和最近从ajax获取的全新数据重新绘制表格。

我正在使用CDN for datatable：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.js"></script>

我尝试加载表中的数据表：

我使用php作为服务器端脚本，它以JSON格式返回数据：

<?php
    //include connection file 
    include_once("connection.php");

    $From = $_POST["from"];
    $To = $_POST["to"];

    // initilize all variable
    $params = $columns = $totalRecords = $data = array();

    $params = $_REQUEST;

    //define index of column
    $columns = array( 
        0 =>'id',
        1 =>'employee_name', 
        2 => 'employee_salary',
        3 => 'employee_age',
        4 => 'join_date'
    );


    $where = $sqlTot = $sqlRec = "";

    // getting total number records without any search
    $sql= sprintf("SELECT id, employee_name, employee_salary, employee_age, join_date  FROM `employee` WHERE `join_date` BETWEEN '%s' AND '%s'",$From, $To);
    $sqlTot .= $sql;
    $sqlRec .= $sql;   
    $sqlRec .=  " ORDER BY employee_name";    
    $queryTot = mysqli_query($conn, $sqlTot) or die("database error:". mysqli_error($conn));    
    $totalRecords = mysqli_num_rows($queryTot);   
    $queryRecords = mysqli_query($conn, $sqlRec) or die("error to fetch employees data");    
    //iterate on results row and create new index array of data
    while( $row = mysqli_fetch_row($queryRecords) ) { 
        $data[] = $row;
    }   

    $json_data = array(
            "draw"            => 1,   
            "recordsTotal"    => intval( $totalRecords ),  
            "recordsFiltered" => intval($totalRecords),
            "data"            => $data   // total data array
            );

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

我的HTML表格是：

<div class="container" style="padding:20px;20px;">
      <div id="dataTable">
        <h1 align="center">Data Table with Ajax</h1>
        <div class="">
        <div class="searching">
                <label for="datatable-ajax-from">From: </label>
                <input type="date" id="datatable-ajax-from">                
                <label for="datatable-ajax-to">To: </label>
                <input type="date" id="datatable-ajax-to">              
                <button id="go">GO</button>             
             </div>
            <br/> 
        <table id="employee_grid" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Empid</th>
                <th>Name</th>
                <th>Salary</th>
                <th>Age</th>
                <th>Join Date</th>
            </tr>
        </thead>
        <tbody>
            <!--database content here-->
        </tbody>
    </table>
    </div>
      </div>    
    </div>

当用户点击带有日期输入中的更改数据的GO按钮时，我调用了ajax。我在日期输入用户选择员工join_date的日期以及从数据库表中获取所选加入日期的所有员工。

现在我需要的是使用DataTable调用带有用户选择的参数连接日期范围的ajas，并通过重新初始化dataTable来填充表中的数据。

我使用jquery脚本如下：

<script type="text/javascript">
$( document ).ready(function() {
    $('#employee_grid').DataTable();
});
$('div#dataTable').find('div.searching button#go').on('click', function(){
    var from = $('div#dataTable').find('input#datatable-ajax-from').val();
    var to = $('div#dataTable').find('input#datatable-ajax-to').val();
    FetchData(from, to);
    });

function FetchData(from, to){
    $('#employee_grid').DataTable({
         "processing": true,
         "sAjaxSource":"response.php",
         "dom": 'lBfrtip',
        });
}
</script>

现在，我将如何使用DataTable发送参数来获取数据。

Answer 1

这可能会有所帮助 How to do custom filtering with Datatables and server-side processing

对于较新版本（1.10.16），您可以参考https://datatables.net/reference/option/ajax.data

在DataTable-Ajax-jQuery中发送参数

1 个答案: