JS（二十二）DataTables使用

阳光穿透心脏的1/2处 2022-06-07 10:23 198阅读 0赞

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。免费开源 （ MIT license ）！ 支持商业用途。中文地址：http://www.datatables.club/  
分页，即时搜索和排序  
几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理  
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation  
各式各样的扩展: Editor, TableTools, FixedColumns ……  
丰富多样的option和强大的API  
支持国际化  
超过2900+个单元测试

由于金融表格数据较多，表格太长不好，所以我们项目组讨论决定使用分页实现表格，在网上找了很多的插件，最后找到这个插件，发现真的很好用，为项目节约了很多时间。

使用方式：

自己动态建好表格，配置一点点数据项，即可实现想要的效果：

$.extend( $.fn.dataTable.defaults, { "searching": false, "ordering": false, "oLanguage": { "oAria": { "sSortAscending": ": activate to sort column ascending", "sSortDescending": ": activate to sort column descending" }, "oPaginate": { "sFirst": "首页", "sLast": "尾页", "sNext": "下一页", "sPrevious": "上一页" }, "sEmptyTable": "无数据", "sInfo": "　共有_TOTAL_条数据,显示 _START_至 _END_条", "sInfoEmpty": "共有0条数据,显示 0　至 0　条", "sInfoPostFix": "", "sDecimal": "", "sThousands": ",", "sLengthMenu": "Show _MENU_ entries", "sLoadingRecords": "加载中...", "sProcessing": "处理中...", "sUrl": "" } }); $("#" + id).DataTable({ "pagingType": "full_numbers" }); $("#" + id + " tfoot tr").appendTo('#datatableId thead'); $("#" + id + "_length").css('display', 'none'); var widths = $(".app-table-contain").width(); $("#" + id).css('width', widths); $(window).on('resize', function(){ var width = $(".app-table-contain").width(); $("#" + id).css('width', width); });

说明：

1、id是表格的id，"app-table-contain"是表格的容器id

2、项目必须引入三个额外的文件：jquery、jquery.dataTables.min.css和jquery.dataTables.min.js。

3、如果样式有其他问题，可以修改DataTables源码.