JS（二十二）DataTables使用

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源码.