Datatables是一款jquery表格插件。
它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
中文官网:http://www.datatables.club
功能与实现:
- 分页,即时搜索和排序。
- 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理。
- 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation。
- 各式各样的扩展: Editor, TableTools, FixedColumns ……。
-
丰富多样的option和强大的API。
- 支持国际化。
- 超过2900+个单元测试。
- 免费开源 ( MIT license )! 商业支持。
简单实例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数据表</title> <link rel="stylesheet" type="text/css" href="datatables/css/jquery.dataTables.min.css" /> <link rel="stylesheet" type="text/css" href="datatables/css/buttons.dataTables.min.css" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="datatables/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="datatables/js/dataTables.buttons.min.js"></script> <script type="text/javascript" src="datatables/js/jszip.min.js"></script> <script type="text/javascript" src="datatables/js/buttons.html5.min.js"></script> </head> <body> <input type="text" id="uername" /><button οnclick="seaRch()">查询</button> <table id="table_example" class="layui-table display nowrap" width="100%"> <thead> <tr> <th width="5%">用户ID</th> <th width="8%">用户名称</th> <th width="8%">联系人</th> <th width="8%">手机号</th> <th width="8%">状态</th> <th width="5%">功能</th> </tr> </thead> <tfoot> <tr> <td colspan="12" align="center"> <div id="div_pager"></div> </td> </tr> </tfoot> </table> </body> <script type="text/javascript"> var table $(document).ready(function() { /*表格排序,分页*/ table = $('#table_example').DataTable({ "dom": 'Bfrtip', "aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 4 , 5] }], //指定那几列不可以排序 /*"aaSorting": [[ 3, "desc" ]],*///默认按那几列排序 "columnDefs": [{ "targets": [0], "searchable": false }], //设置第一列不参与搜索 "serverSide": true,//服务器模式 //true:客户端处理模式——此模式下如:过滤、分页、排序的处理都在浏览器中进行。 //false:服务器端处理模式——此模式下如:过滤、分页、排序的处理都放在服务器端进行。 "ajax": { //例json数据:{"status": 0,"data": [{"user_id": 1,"user_name": "名字1","contacts":"联系人a","phone":"10086","state":"开启"},{"user_id": 2,"user_name": "名字2","contacts":"联系人b","phone":"10010","state":"关闭"},]} "url": "users/data.json", "type": "get", "data": function(d) { //添加额外的数据传给后台 d.uername = $("#uername").val(); } },//解析返回数据显示到页面 "columns": [{ "data": "user_id" }, { "data": "user_name" }, { "data": "contacts" }, { "data": "phone", render: function(data, type, row, meta) { return '<a href="getPlayers?user_id=' + row.user_id + '">' + data + '</a>'; } }, { "data": "state", render: function(data, type, row, meta) { if (data == "关闭") { return '<span style="color:green">' + data + '</span>'; } else if (data == "开启") { return '<span style="color:red">' + data + '</span>'; } } }, { "data": null, render: function(data, type, row, meta) { if (row.state == '关闭') { return '<a class="b" href="#" style="color: blue" οnclick="okAudits("' + row.user_id + '",1)">开启</a><a href="#" class="bb" style="color: blue" οnclick="okAudit("' + row.user_id + '",0)">关闭</a>'; } else if (row.state == '开启') { return '<a href="#" style="color: blue" οnclick="okAudit("' + row.user_id + '",1)">开启</a><a href="#" style="color: blue" οnclick="okAudit("' + row.user_id + '",0)">关闭</a>'; } } } ], "bStateSave": true, //跳转回来还在当前页 "paging": true,//分页 "searching": true,//搜索 "responsive": true, "bLengthChange": true, "processing": true, "sPaginationType": "full_numbers",//间隔类型 "lengthMenu": [//自定义选择每页面显示多少条数据 [10, 20, 30, 50, -1], [10, 20, 30, 50, "所有"] ], "sDom": '<"top"fl>rt<"bottom"ip><"clear">', //控制元素的位置 "oLanguage": { "sProcessing": "努力加载数据中.", "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "抱歉, 没有找到", "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", "sZeroRecords": "没有检索到数据", "sSearch": "模糊查询: ", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } } }); $('#table_example tbody').on('click', '.b', function() { var data = table.row($(this).parents('tr')).data(); alert(data.user_id); alert("您确定要开启吗?"); }); $('#table_example tbody').on('click', '.bb', function() { var data = table.row($(this).parents('tr')).data(); alert("您确定要关闭吗?" + data.user_id); }); }) function seaRch() { table.ajax.reload(); } </script> </html>
更多功能与实现可到此搜索:http://www.datatables.club/reference/option/
发表评论