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はグローバル変数として定義され、位置は自分でプロジェクトフレームワークを構築するなどの具体的な状況によって決まる.