我已经实现了Ajaxed Datatable来表示分页表中的大约5000行。
一切正常,直到过滤没有应用。我可以简短的栏目和分页适用于非过滤数据。
有一次,我在一些字段上应用短路,假设我写了手机号码90331
然后它应该输出所有记录,其中手机号码以90331
开头,SQL按预期工作。搜索结果大约为2500行,根据分页设置,它给出前20行。 但是一旦我点击下一页按钮,它就会触发分页事件并发送ajax请求,而不需要"过滤参数"。因此,由于过滤参数不是在ajax请求上发送的,所以它不会过滤并且它会丢失过滤后的数据状态并返回带有所有数据的第二页(不进行过滤)。如果我点击列标题进行排序,也会发生同样的情况。
问题
如何让Datatable发送过滤参数值以及Sorting&amp ;;等事件。分页?
以下是代码:
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> 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 );
任何帮助/建议都将不胜感激。
谢谢!
答案 0 :(得分:0)
终于解决了!
使用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请求添加自定义参数(分页,排序,过滤等)。因此,每次它都会在后端处理过滤器中使用它。
希望它对某人有用!