datatables使用封装

        公司系统更新，使用了新的框架metronic bootstrap来搭建新的系统，而列表的展示用的就是datatbles插件，样式使用bootstrap。在对datatbles进行了多方研究后，我自己封装了数据表展示的的js，这样使用中只需要调用此方法，传入相应的参数即可快速搭建数据表展示界面。

        基础的数据表展示方法如下：

/*
 * 初始化表格，可多选
 * tableName：表的id，不用#，默认为sample_1
 * url：数据源地址
 */
function initTable(tableName, url) {
    tableName = tableName || "sample_1";
    url = url || getUrl("1");
    var table = $("#" + tableName);
    var oTable = table.dataTable({
        // Or you can use remote translation file
        "language": {
            url: '../Content/Resource/jquery.dataTable.cn.txt'
        },
        buttons: [
        ],
        "aLengthMenu": [
                    [20, 25, 30, 40, 50, 100, -1],
                    [20, 25, 30, 40, 50, 100, "全部"] // change per page values here
        ],
        "autoWidth": false,
        "sServerMethod": "POST",
        "bProcessing": true,
        "bStateSave": true, // save datatable state(pagination, sort, etc) in cooie.
        "bServerSide": true,
        "sAjaxSource": url,
        "bSort": false,// 排序
        "iDisplayLength": 30,
        "sPaginationType": "bootstrap_full_number",
        "fnServerParams": function (aoData) {//向服务器传额外的参数
            aoData.push(
                { "name": "sNode", "value": exdData }
            );
        }
    });
    //选择第一行（表头行）最上面checkbox，所以行都选中
    table.on('change', '.group-checkable', function () {
        var set = jQuery(this).attr("data-set");
        var checked = jQuery(this).is(":checked");
        jQuery(set).each(function () {
            if (checked) {
                $(this).prop("checked", true);
                $(this).parents('tr').addClass("active");
            } else {
                $(this).prop("checked", false);
                $(this).parents('tr').removeClass("active");
            }
        });

    });

    //选择每行的开始checkbox，则选中此行，颜色变化
    //此事件会先调用tr的click时间，这样会再次改变checkbox的状态，进而调用其chang事件
    table.on('change', 'tbody tr .checkboxes', function () {   //tbody tr
        $(this).parents('tr').toggleClass("active");
    });

    //选中每行任意位置，改变行颜色，checkbox状态
    table.on('click', 'tbody tr', function () {
        $(this).toggleClass("active");
        if ($(this).is(".active")) {
            $(this).find(".checkboxes").prop("checked", true);  //.attr("checked", true);
        } else {
            $(this).find(".checkboxes").removeAttr("checked");  //.attr("checked", false);
        }
        //当所有的行都被选中，则最上面的checkbox也勾选，否则不勾选
        var showCount = table.find("tbody tr").length;
        var selectedCount = $("input[class='checkboxes']:checked").length;
        if (showCount == selectedCount) {
            $('.group-checkable').prop("checked", true);  //.attr("checked", true);比用attr好
        } else {
            $('.group-checkable').removeAttr("checked");  //.attr("checked", false);
        }
    });

    //修改数据显示条数下拉控件样式处理
    var tableWrapper = jQuery('#' + tableName + '_wrapper');
    tableWrapper.find('.dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown

}

其中本地方的txt文件单独存放的，内容如下：

{  
	"processing": "加载中...",
        "lengthMenu": "每页显示 _MENU_ 条数据",
        "zeroRecords": "没有匹配结果",
        "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "infoFiltered": "(由 _MAX_ 项结果过滤)",
        "infoPostFix": "",
        "search": "搜索:",
        "url": "",
        "emptyTable": "没有匹配结果",
        "loadingRecords": "数据载入中...",
        "thousands": ",",
        "paginate": {
            "first": "首页",
            "previous": "上一页",
            "next": "下一页",
            "last": "末页"
        },
        "aria": {
            "sortAscending": ": 以升序排列此列",
            "sortDescending": ": 以降序排列此列"
        }
} 

向服务器传递的参数exdData定义为全局变量，位置由自己搭建项目框架等具体情况而定！