Ajaxed 数据表：POST 在 shorting/pagination 事件上过滤参数

Question

我已经实施 Ajaxed Datatable 来表示分页 table 中的大约 5000 行。

一切正常，直到不应用过滤。我可以针对未过滤的数据缩短列和分页。

有一次，我在某个字段上应用了短路，假设我写了手机号码 90331，那么它应该输出所有手机号码以 90331 开头的记录，而 SQL 按预期工作。搜索结果大约有 2500 行，根据分页设置，它给出前 20 行。但是当我点击下一页按钮时，它会触发分页事件并发送 ajax 没有 "FILTERING PARAMETERS" 的请求。因此，由于未在 ajax 请求上发送过滤参数，因此它不会过滤并且会丢失过滤后的数据状态和 returns 包含所有数据的第二页（无过滤）。如果我单击列标题进行排序，也会发生同样的情况。

问题

如何使 Datatable 与排序和分页等事件一起发送过滤参数值？

代码如下：

HTML

<table class="table table-striped table-bordered table-hover ajax-table">
    <thead>
        <tr role="row" class="heading">
            <th>Index</th>
            <th>Name</th>
            <th>Email</th>
            <th>Mobile</th>
            <th>Actions</th>
        </tr>
        <tr role="row" class="filter"> <!-- Custom filters here -->
            <td></td>
            <td>
                <input type="text" class="form-control form-filter input-sm" name="cust_name" placeholder="Name">
            </td>
            <td>
                <input type="text" class="form-control form-filter input-sm" name="cust_email" placeholder="Email">
            </td>
            <td>
                <input type="text" class="form-control form-filter input-sm" name="cust_mobile" placeholder="Mobile">
            </td>
            <td>
                <button class="btn btn-sm yellow filter-submit margin-bottom"><i class="fa fa-search"></i> Search</button>
            </td>                                       
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

JavaScript

grid = new Datatable();
grid.init({
    src: $(".ajax-table"),
    onSuccess: function(grid) {
        // execute some code after table records loaded
    },
    onError: function(grid) {
        // execute some code on network or other general error  
    },
    dataTable: {  // here you can define a typical datatable settings from http://datatables.net/usage/options 
        "aLengthMenu": [
            [20, 50, 100, 150, 200],
            [20, 50, 100, 150, 200] 
        ],
        "oLanguage": {  // language settings
            "sProcessing": '<img src="assets/img/loading-spinner-grey.gif"/><span>&nbsp;&nbsp;Loading...</span>',
        },
        "iDisplayLength": 50, // default record count per page
        "bServerSide": true, // server side processing
        "sAjaxSource": "ajax/customers_ajax.php", // ajax source to retrive customer details
        "aaSorting": [[ 1, "asc" ]], // set first column as a default sort by asc
        "aoColumns": [
                      { "sName": "id","bSortable":false,"sWidth":"5%"},
                      { "sName": "cust_name" ,"sWidth":"10%"},
                      { "sName": "cust_email" },
                      { "sName": "cust_mobile","sWidth":"10%"},
                      { "sName": "Action","bSortable":false }
                  ]
    }
});

PHP（Ajax 来源）

//Identifying column to short on
$columns=explode(",",$_POST['sColumns']); 
$sortCol=$_POST['iSortCol_0'];
$sortOrder=$_POST['sSortDir_0'];
$table="tblcustomer";
$records = array ();

if (isset ( $_REQUEST ["sAction"] ) && $_REQUEST ["sAction"] == "filter") {
    //Counting "TOTAL" number of rows, that can be returned for given "filters"
    $query = "select count(*) total from $table
            where cust_status>-1 ";
    if (!empty( $_REQUEST ['cust_name'] )) {
        $query .= "and cust_name like :cust_name ";
    }
    if (!empty( $_REQUEST ['cust_mobile'] )) {
        $query .= "and cust_mobile like :cust_mobile ";
    }
    if (!empty( $_REQUEST ['cust_email'] )) {
        $query .= "and cust_email like :cust_email ";
    }

    $query = $con->prepare ( $query );

    if (!empty( $_REQUEST ['cust_name'] )) {
        $query->bindValue ( ":cust_name", $_REQUEST ['cust_name'] . "%" );
    }
    if (!empty( $_REQUEST ['cust_mobile'] )) {
        $query->bindValue ( ":cust_mobile", "%".$_REQUEST ['cust_mobile'] . "%" );
    }
    if (!empty( $_REQUEST ['cust_email'] )) {
        $query->bindValue ( ":cust_email", "%".$_REQUEST ['cust_email'] . "%" );
    }
} else {
    //Counting "TOTAL" number of rows in a table --- For non-filter action
    $query = $con->prepare ( "select count(*) total from $table
            where cust_status>-1 " );
}

$query->execute ();
$row = $query->fetch ( PDO::FETCH_ASSOC );

$iTotalRecords = $row ['total'];

$iDisplayLength = intval ( $_REQUEST ['iDisplayLength'] );
$iDisplayLength = $iDisplayLength < 0 ? $iTotalRecords : $iDisplayLength;
$iDisplayStart = intval ( $_REQUEST ['iDisplayStart'] );
$sEcho = intval ( $_REQUEST ['sEcho'] );

$records ["aaData"] = array (); //actual data for Datatable rows.

if (isset ( $_REQUEST ["sAction"] ) && $_REQUEST ["sAction"] == "filter") {
    //Fetching Filtered data
    $query = "SELECT `id`, `cust_name`, `cust_mobile`, `cust_email`
            FROM $table 
            WHERE cust_status>-1 ";
    if (!empty( $_REQUEST ['cust_name'] )) {
        $query .= "and cust_name like :cust_name ";
    }
    if (!empty( $_REQUEST ['cust_mobile'] )) {
        $query .= "and cust_mobile like :cust_mobile ";
    }
    if (!empty( $_REQUEST ['cust_email'] )) {
        $query .= "and cust_email like :cust_email ";
    }
    $query .=" order by {$columns[$sortCol]} {$sortOrder}";
    $query .= " limit $iDisplayStart, $iDisplayLength";

    $query = $con->prepare ( $query );

    if (!empty( $_REQUEST ['cust_name'] )) {
        $query->bindValue ( ":cust_name", $_REQUEST ['cust_name'] . "%" );
    }
    if (!empty( $_REQUEST ['cust_mobile'] )) {
        $query->bindValue ( ":cust_mobile", "%".$_REQUEST ['cust_mobile'] . "%" );
    }
    if (!empty( $_REQUEST ['cust_email'] )) {
        $query->bindValue ( ":cust_email", "%".$_REQUEST ['cust_email'] . "%" );
    }

} else {
    $query = $con->prepare ( "SELECT `id`, `cust_name`, `cust_mobile`, `cust_email` 
            FROM $table`
            WHERE cust_status>-1
            order by {$columns[$sortCol]} {$sortOrder} 
            limit $iDisplayStart, $iDisplayLength" );
}
$query->execute ();

if ($query->rowCount () > 0) {
    while ( $row = $query->fetch ( PDO::FETCH_ASSOC ) ) {

        $edit="<button class='btn btn-warning btn-sm'>Edit</button>";
        $delete="<button class='btn btn-danger btn-sm'>Delete</button>";

        $records ["aaData"] [] = array (
                $row ['id'],
                $row ['cust_name'],
                $row ['cust_email'],
                $row ['cust_mobile'],
                "$edit $delete"
        );
    }
}

$records ["sEcho"] = $sEcho;
$records ["iTotalRecords"] = $iTotalRecords;
$records ["iTotalDisplayRecords"] = $iTotalRecords;
echo json_encode ( $records );

任何 help/suggestions 将不胜感激。

谢谢！

Answer 1

终于解决了！

使用 fnServerParams 添加了自定义过滤器参数，如下所示：

"fnServerParams": function ( aoData ) {
    //here can be added an external ajax request parameters.
    $('textarea.form-filter, select.form-filter, input.form-filter:not([type="radio"],[type="checkbox"])', table).each(function(){
        aoData.push({"name" : $(this).attr("name"), "value": $(this).val()});
    });
}

它将为每个 ajax 请求添加自定义参数（分页、排序、过滤等）。因此，每次它都会在过滤器的后端处理中使用它。

希望对大家有用！

Ajaxed 数据表：POST 在 shorting/pagination 事件上过滤参数

Ajaxed Datatable: POST filter parameters on shorting/pagination event

php

ajax

datatable

pagination

datatables