DataTables安装 ------------ [参考官方文档][1] DataTables安装 第一步引入JS,CSS 第二步:配置基本HTML 第三步:配置DataTables 基本参数 <!--第一步:引入Javascript / CSS (CDN)--> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/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.15/js/jquery.dataTables.js"></script> <!--或者下载到本地,下面有下载地址--> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="DataTables-1.10.15/media/css/jquery.dataTables.css"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script> <!--第二步:添加如下 HTML 代码--> <table id="table_id_example" class="display"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Row 1 Data 1</td> <td>Row 1 Data 2</td> </tr> <tr> <td>Row 2 Data 1</td> <td>Row 2 Data 2</td> </tr> </tbody> </table> <!--第三步:初始化Datatables--> $(document).ready( function () { $('#table_id_example').DataTable(); } ); DataTables 基本配置实例 ----------------- 下面这些参数的配置,都是1.10.15 版本最新的配置参数,sPaginationType,iDisplayLength,bSort,bLengthChange,fnServerParams 这些参数在新版本中已经变了,虽然 DataTables向下兼容,但是不再推荐使用了。 //表格全局设置, 配置已更新为新版本 //把公共的设置项都放在这里,就不需要每个页面都设置一遍了,放在jQuery对象上是为了避免污染全局变量 $.fn.dtconfig = { processing: true,//是否显示加载中提示 autoWidth: false,//是否自动计算表格各列宽度 info: true,//是否显示页数信息 pagingType:"full_numbers", pageLength :10,//默认每页显示多少条记录 searching: false,//是否显示搜索框 ordering:false,//是否允许排序 serverSide: true,//是否从服务器获取数据 stateSave: false,//页面重载后保持当前页 lengthChange: true,//是否显示每页大小的下拉框 lengthMenu: [ 10, 15,25, 50, 75, 100 ],//长度菜单 language: { lengthMenu: "每页显示 _MENU_记录", zeroRecords: "没有匹配的数据", info: "第_PAGE_页/共 _PAGES_页 ( 共\_TOTAL\_条记录 )", infoEmpty: "没有符合条件的记录", search: "查找", infoFiltered: "(从 _MAX_条记录中过滤)", paginate: { "first": "首页 ", "last": "末页", "next": "下一页", "previous": "上一页" } }, responsive: true, scrollX: true,//横向滑动 //deferRender: true,//控制表格的延迟渲染,可以提高初始化的速度 //dom: 'lBrtip',//DataTables 各模块显示位置 //buttons: [// DataTables Button 扩展,使用时,需要引入插件相关的JS // //{ // // extend: "copy", // // className: "btn-sm" // //}, // //{ // // extend: "csv", // // className: "btn-sm" // //}, // { // extend: "excel", // text: "导出本页(Excel)", // className: "btn-primary", // filename:"人员表" // }, // //{ // // extend: "pdfHtml5", // // className: "btn-sm" // //}, // //{ // // extend: "print", // // className: "btn-sm" // //}, //] } 公共部分放在通用的JS种, 我们每个页面,就可以直接这样使用了: $('#table_id_example').DataTable($.fn.dtconfig); ![datatable.png][2] [1]: http://datatables.net/ [2]: https://samool.com/usr/uploads/2019/12/1606376950.png Loading... DataTables安装 ------------ [参考官方文档][1] DataTables安装 第一步引入JS,CSS 第二步:配置基本HTML 第三步:配置DataTables 基本参数 <!--第一步:引入Javascript / CSS (CDN)--> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/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.15/js/jquery.dataTables.js"></script> <!--或者下载到本地,下面有下载地址--> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="DataTables-1.10.15/media/css/jquery.dataTables.css"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script> <!--第二步:添加如下 HTML 代码--> <table id="table_id_example" class="display"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Row 1 Data 1</td> <td>Row 1 Data 2</td> </tr> <tr> <td>Row 2 Data 1</td> <td>Row 2 Data 2</td> </tr> </tbody> </table> <!--第三步:初始化Datatables--> $(document).ready( function () { $('#table_id_example').DataTable(); } ); DataTables 基本配置实例 ----------------- 下面这些参数的配置,都是1.10.15 版本最新的配置参数,sPaginationType,iDisplayLength,bSort,bLengthChange,fnServerParams 这些参数在新版本中已经变了,虽然 DataTables向下兼容,但是不再推荐使用了。 //表格全局设置, 配置已更新为新版本 //把公共的设置项都放在这里,就不需要每个页面都设置一遍了,放在jQuery对象上是为了避免污染全局变量 $.fn.dtconfig = { processing: true,//是否显示加载中提示 autoWidth: false,//是否自动计算表格各列宽度 info: true,//是否显示页数信息 pagingType:"full_numbers", pageLength :10,//默认每页显示多少条记录 searching: false,//是否显示搜索框 ordering:false,//是否允许排序 serverSide: true,//是否从服务器获取数据 stateSave: false,//页面重载后保持当前页 lengthChange: true,//是否显示每页大小的下拉框 lengthMenu: [ 10, 15,25, 50, 75, 100 ],//长度菜单 language: { lengthMenu: "每页显示 _MENU_记录", zeroRecords: "没有匹配的数据", info: "第_PAGE_页/共 _PAGES_页 ( 共\_TOTAL\_条记录 )", infoEmpty: "没有符合条件的记录", search: "查找", infoFiltered: "(从 _MAX_条记录中过滤)", paginate: { "first": "首页 ", "last": "末页", "next": "下一页", "previous": "上一页" } }, responsive: true, scrollX: true,//横向滑动 //deferRender: true,//控制表格的延迟渲染,可以提高初始化的速度 //dom: 'lBrtip',//DataTables 各模块显示位置 //buttons: [// DataTables Button 扩展,使用时,需要引入插件相关的JS // //{ // // extend: "copy", // // className: "btn-sm" // //}, // //{ // // extend: "csv", // // className: "btn-sm" // //}, // { // extend: "excel", // text: "导出本页(Excel)", // className: "btn-primary", // filename:"人员表" // }, // //{ // // extend: "pdfHtml5", // // className: "btn-sm" // //}, // //{ // // extend: "print", // // className: "btn-sm" // //}, //] } 公共部分放在通用的JS种, 我们每个页面,就可以直接这样使用了: $('#table_id_example').DataTable($.fn.dtconfig); ![datatable.png][2] [1]: http://datatables.net/ [2]: https://samool.com/usr/uploads/2019/12/1606376950.png 最后修改:2019 年 12 月 04 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 支持就是力量