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