最近写后台,觉得datatable的插件很好用。Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
但是以前一直没有使用服务器分页。数据量庞大后表格加载太慢。因而研究了下服务器分页。遇到了不少坑,终于成功解决了问题.
一、html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
| <!DOCTYPE html> <head> <title>index</title> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"> </script> </head> <body> <div class="form-horizontal"> <div class="form-group"> <label for="status" class="col-sm-1 control-label">状态筛选</label> <div class="col-sm-2"> <select id="status" class="form-control"> <option value="1">状态1</option> <option value="2">状态2</option> <option value="3">状态3</option> <option value="">全部</option> </select> </div> </div> </div> <table id="table" class="display"> <thead> <tr> <th>ID</th> <th>username</th> <th>to_username</th> <th>desc</th> <td>status</td> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </body> </html>
|
二、js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
| <script> $(function(){ var table = $("#table").DataTable({ "oLanguage": { "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "抱歉, 没有找到", "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sSearch": "关键字筛选:", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" }, }, "ajax": { "url":"/?c=site&a=ajaxTable", "data": function ( d ) { d.status = $('#status').val(); } }, "processing": true, "serverSide": true, "fnRowCallback": function(nRow, aaData, iDisplayIndex) { if(aaData[3]){ $('td:eq(3)', nRow).html('时间' + aaData[3]); } return nRow; }, initComplete:initComplete, }); function initComplete(){ $("#status").on('change', function(){ table.ajax.reload(); }); } }); </script>
|
三、服务器代码(php)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| public function ajaxTable() { $start = $_GET['start']; $length = $_GET['length']; $status = $_GET['status']; $where = ['status'=>$status]; $res = []; $aaData = []; for($i=0; $i<=20; $i++){ $res[] = [ $i, 'username', 'tousername', time(), 'status' ]; } $aaData = array_slice($res, $start, $length); $data = []; $data['sEcho'] = $_GET['sEcho']; $data['iTotalDisplayRecords'] = count($res); $data['iTotalRecords'] = count($res); $data['aaData'] = $aaData; $data['iDisplayLength'] = $length; echo json_encode($data); }
|
四、服务器返回的json代码示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| { "sEcho": null, "iTotalDisplayRecords": 3, "iTotalRecords": 3, "aaData": [ [ 0, "username", "tousername", 1462873816, "status" ], [ 1, "username", "tousername", 1462873816, "status" ], [ 2, "username", "tousername", 1462873816, "status" ] ], "iDisplayLength": null }
|
五、总结
1、搜索功能,使用table.ajax.reload()触发从新加载table。
1 2 3 4 5 6
| function initComplete(){ $("#status").on('change', function(){ table.ajax.reload(); }); }
|
2、触发时传递搜索参数
1 2 3 4 5 6 7
| "ajax": { "url":"/?c=site&a=ajaxTable", "data": function ( d ) { d.status = $('#status').val(); } }
|
3、服务器端接受搜索参数
$status = $_GET['status']
4、回调函数fnRowCallback
服务器返回的信息有时候需要转换,可以使用回调函数fnRowCallback处理
5、参考网站
- Datatables中文网
- 官网https://datatables.net