datatable表格框架服务器端分页查询设置
Posted 东篱
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了datatable表格框架服务器端分页查询设置相关的知识,希望对你有一定的参考价值。
js代码如下:
$(‘#mytable‘).dataTable(
{
"bServerSide": true, //开启服务器模式,使用服务器端处理配置datatable。注意:sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。开启此模式后,你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序(表头)、搜索,这些都会传给服务器相应的值。
"sAjaxSource": "ajax.php", //给服务器发请求的url
"aoColumns": [ //这个属性下的设置会应用到所有列,按顺序没有是空
{"sDefaultContent": ‘‘},//checkbox column 相当于占位符,等待填充。也可以指定值如 {"mData": ‘ip‘}
{"sDefaultContent": ‘‘},//ip column
{"sDefaultContent": ‘‘},//nip column
{"sDefaultContent": ‘‘},//role column
{"sDefaultContent": ‘‘},//gamenserver column
{"sDefaultContent": ‘‘},//serverid column
{"sDefaultContent": ‘‘},//status column
{"sDefaultContent": ‘‘},//remark column
{"sDefaultContent": ‘‘},//ctime column
{"sDefaultContent": ‘‘, "sClass": "action"},//sClass 表示给本列加class
],
"aoColumnDefs": [//和aoColums类似,但他可以给指定列附近爱属性
{"bSortable": false, "aTargets": [0,7,9]}, //这句话意思是第7,9列(从0开始算)不排序
],
"aaSorting": [[1, "asc"]], //默认排序
"fnRowCallback": function(nRow, aData, iDisplayIndex) {// 给各列填充内容
$(‘td:eq(0)‘, nRow).html(‘<label><input type="checkbox" id="hids[]" value="‘+aData.id+‘-‘+aData.status+‘" name="hids[]"></label>‘);
$(‘td:eq(2)‘, nRow).html(aData.nip);
var role = aData.role.split(‘ ‘);
var href = "";
for(var i=0;i<role.length;i++){
href += ‘<a href="host.php?ser=‘+role[i]+‘">‘+role[i]+‘</a> ‘;
}
$(‘td:eq(3)‘, nRow).html(href);
$(‘td:eq(4)‘, nRow).html(aData.gameserver);
$(‘td:eq(5)‘, nRow).html(aData.serverid);
$(‘td:eq(7)‘, nRow).html(aData.remark);
$(‘td:eq(8)‘, nRow).html(aData.ctime);
if (aData.status == 1) {
if(aData.hostscreenid){
$(‘td:eq(1)‘, nRow).html(‘<a href="http://11.111.111.11:8081/screen/‘+aData.hostscreenid+‘"><span style="color:red;">‘+aData.ip+‘</span></a>‘);
}else{
$(‘td:eq(1)‘, nRow).html("<span style=‘color:red;‘>"+aData.ip+"</span>");
}
$(‘td:eq(6)‘, nRow).html("<span style=‘color:red;‘>线下</span>");
} else if (aData.status == 0) {
if(aData.hostscreenid){
$(‘td:eq(1)‘, nRow).html(‘<a href="http://11.111.111.11:8081/screen/‘+aData.hostscreenid+‘">‘+aData.ip+‘</a>‘);
}else{
$(‘td:eq(1)‘, nRow).html(aData.ip);
}
$(‘td:eq(6)‘, nRow).html("<span>线上</span>");
}
$(‘td:eq(9)‘, nRow).html(‘<a href="host.php?op=del&id=‘+aData.id+‘"> <button class="btn btn-danger btn-sm">删除</button> </a> <button class="btn btn-success btn-sm" data-toggle="modal"data-target="#myModal‘+aData.id+‘">编辑 </button> ‘);
return nRow;
},
}
);
1 服务器端php代码
2 $sEcho = $_GET[‘sEcho‘];
3 $start = $_GET[‘iDisplayStart‘];//从多少开始
4 $length = $_GET[‘iDisplayLength‘];//数据长度
5 $sort_th = $_GET[‘iSortCol_0‘];//被排序的列
6 $sort_type = $_GET[‘sSortDir_0‘];//排序规则
7
8 if(!empty($_GET[‘sSearch‘])){
9 $search = $_GET[‘sSearch‘];
10 }
11
12 $where = "";
13 $order = "";
14 if ($search) {
15 $where = " where concat( xx,xx,xx,xx) like ‘%$search%‘ ";//查询
16 }
17
18 if ($sort_th == 1) {
19 $order = " order by xx " . $sort_type . " ";
20 } elseif ($sort_th == 2) {
21 $order = " order by xx " . $sort_type . " ";
22 } elseif ($sort_th == 4) {
23 $order = " order by xx " . $sort_type . " ";
24 } elseif ($sort_th == 4) {
25 $order = " order by xx " . $sort_type . " ";
26 } elseif ($sort_th == 5) {
27 $order = " order by xx " . $sort_type . " ";
28 } elseif ($sort_th == 6) {
29 $order = " order by xx " . $sort_type . " ";
30 } elseif ($sort_th == 8) {
31 $order = " order by xx " . $sort_type . " ";
32 }
33 $condition = $where . $order;
34
35 $hosts = getLimitRow("xx,xx,xx,xx", ‘table‘, $condition, $start, $length);
36 $count = getRecordCount(‘table‘);
37 if(count($hosts) > 0){
38 $host_screenid = getScreenid();
39 foreach ($hosts as $index => $values) {
40 foreach ($values as $field => $value) {
41 if ($values[‘status‘] == 0) {
42 $status_str = toutf8(‘线上‘);
43 } else {
44 $status_str = toutf8(‘线下‘);
45 }
46 $aaData[$index][$field] = toutf8($value);
47 $aaData[$index][‘statusstr‘] = $status_str;
48 $aaData[$index][‘hostscreenid‘] = $host_screenid[$aaData[$index][‘ip‘]];
49 }
50 }
51
52 if ($search) {
53 $dcount = getRecordCount(‘table‘, "where concat( xxx,xx,xx) like ‘%$search%‘ ");
54 } else {
55 $dcount = $count;
56 }
57 $json_data = array(‘sEcho‘ => $sEcho, ‘iTotalRecords‘ => $count, ‘iTotalDisplayRecords‘ => $dcount, ‘aaData‘ => $aaData);
58 echo json_encode($json_data);
59 exit;
60 }else{
61 $aaData = array();
62 $json_data = array(‘sEcho‘ => $sEcho, ‘iTotalRecords‘ => $count, ‘iTotalDisplayRecords‘ => 0, ‘aaData‘ => $aaData);
63 echo json_encode($json_data);
64 }
以上是关于datatable表格框架服务器端分页查询设置的主要内容,如果未能解决你的问题,请参考以下文章
Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能