jQuery表格插件DataTables案例
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试！
下面是代码：
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<html> <head> <title></title> <meta charset="utf-8"/> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/jquery.dataTables.css"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="__PUBLIC__/js/jquery-1.8.3.min.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="__PUBLIC__/js/jquery.dataTables.js"></script> <script> $(document).ready( function () { $('#table_id').DataTable({ language: {"sUrl": "__PUBLIC__/js//Chinese.json"}, lengthChange: false, searching: false, ordering: false, processing: true, serverSide: true, columns: [ {"data": "id"}, { "data": "name", "render": function (data, type, full, meta) { if (null != data && data != "") { return data.substring(0, 1) + "*****" + data.substring(3); } } }, { "data": "num", "render": function (data, type, full, meta) { var d = new Date(data); //return d.pattern("yyyy-MM-dd HH:mm:ss"); return data.substring(0, 1) + "*****" + data.substring(3); } } ], ajax: { url: '__MODULE__/index/ListMore', type: 'POST', //data: {borrowId: 73} } }); } ); // $(function () { // // //购买记录 // var table = $('#tableBuyList').DataTable({ // language: {"sUrl": "/js/Chinese.json"}, // lengthChange: false, // searching: false, // ordering: false, // serverSide: true, // columns: [ // { // "data": "mobilephone", // "render": function (data, type, full, meta) { // if (null != data && data != "") { // return data.substring(0, 3) + "*****" + data.substring(8, 11); // } // // } // }, // {"data": "loanMoney"}, // { // "data": "createTime", // "render": function (data, type, full, meta) { // var d = new Date(data); // return d.pattern("yyyy-MM-dd HH:mm:ss"); // } // } // // ], // ajax: { // url: '/regularloan/buyList', // type: 'POST', // data: {borrowId: 73} // } // }); // }) </script> </head> <body> <table id="table_id" class="display"> <thead> <tr> <th>序号</th> <th>名字</th> <th>数字</th> </tr> </thead> <tbody> <foreach name="arr" item="vo" > <tr> <td>{$vo.id}</td> <td>{$vo.name}</td> <td>{$vo.num}</td> </tr> </foreach> </tbody> </table> </body> </html> |
后端代码(thinkphp框架)：
|
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 |
public function ListMore(){ $draw = $_POST['draw'];//这个值作者会直接返回给前台 $User=M('User'); //分页 $start = $_POST['start'];//从多少开始 $length = $_POST['length'];//数据长度 $limitSql = ''; $limitFlag = isset($_GET['start']) && $length != -1 ; if ($limitFlag ) { $limitSql = " LIMIT ".intval($start).", ".intval($length); } //定义查询数据总记录数sql //条件过滤后记录数 必要 $recordsFiltered = 0; //表的总记录数 必要 $recordsTotal = 0; $recordsTotal = $User->count(); $recordsFiltered=$recordsTotal; //query data //$totalResultSql = "SELECT first_name,last_name,position,office,start_date,salary FROM DATATABLES_DEMO"; $infos = array(); $infos = $User->order('id desc')->limit(intval($start).','.intval($length))->select(); /* * Output 包含的是必要的 */ echo json_encode(array( "draw" => intval($draw), "recordsTotal" => intval($recordsTotal), "recordsFiltered" => intval($recordsFiltered), "data" => $infos ),JSON_UNESCAPED_UNICODE); } |
请尊重我们的辛苦付出，未经允许，请不要转载 本站 的文章，鄙视各种无耻的采集行为！