datatables 封裝 post傳參
封裝
var Hf_DataTable = function () { /* 全選以及選中效果功能 */ function checkAll(table) { //全選功能 table.find('.checkall').change(function () { var allCheck = table.find('tbody input[type=checkbox]'); if (jQuery(this).is(":checked")) { allCheck.each(function () { jQuery(this).attr('checked', true); jQuery(this).parent().addClass('checked'); }); } else { allCheck.each(function () { jQuery(this).attr('checked', false); jQuery(this).parent().removeClass('checked'); }); } }); //選中效果 table.on('change', 'tbody tr .check', function () { $(this).parents('tr').toggleClass("active"); if (jQuery(this).is(":checked")) { jQuery(this).attr('checked', true); jQuery(this).parent().addClass('checked'); } else { jQuery(this).attr('checked', false); jQuery(this).parent().removeClass('checked'); } }); } var DataTablePublic = { //理靜態資料 baseTable: function (table) { var oTable = table.dataTable({ 'lengthMenu': [5, 10, 15, 20, 25],//每一頁顯示個數 'searching': false, 'language': { sLengthMenu: "每頁顯示 _MENU_ 條記錄", sZeroRecords: "對不起，查詢不到任何相關資料", sInfo: "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄", sInfoEmtpy: "找不到相關資料", sInfoFiltered: "資料表中共為 _MAX_ 條記錄", sProcessing: "正在載入中...", sSearch: "搜尋", sInfoEmpty: "顯示 0 至 0 共 0 項", oPaginate: { "sFirst": "第一頁", "sPrevious": "上一頁 ", "sNext": "下一頁 ", "sLast": "末頁 " } }, }); checkAll(table);//全選功能 return oTable; }, // 後臺獲取資料 serverTable: function (table, paging, url, reqData, columns, columnDefs, fnServerData) { var oTable = table.dataTable({ 'ajax': { dataType: 'json', type: 'post', url: url, data: function (aoData) { reqData['dtJson'] = JSON.stringify(aoData); return reqData; }, error: function (resp) { alert(JSON.stringify(resp)); } }, 'searching': false, 'serverSide': true,//是否開啟伺服器模式 'processing': true,//進度條 'displayStart': 0,//初一開始顯示第幾頁 'columns': columns, 'columnDefs': columnDefs, 'paging': paging,//是否分頁 'language': { sLengthMenu: "每頁顯示 _MENU_ 條記錄", sZeroRecords: "對不起，查詢不到任何相關資料", sInfo: "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄", sInfoEmtpy: "找不到相關資料", sInfoFiltered: "資料表中共為 _MAX_ 條記錄", sProcessing: "正在載入中...", sSearch: "搜尋", sInfoEmpty: "顯示 0 至 0 共 0 項", oPaginate: { "sFirst": "第一頁", "sPrevious": "上一頁 ", "sNext": "下一頁 ", "sLast": "末頁 " } }, 'lengthMenu': [5, 10, 15, 20, 25],//每一頁顯示個數 'sPaginationType': 'full_numbers',//分頁顯示所有按鈕 //'fnServerData': function (sSource, aoData, fnCallback) { // $.ajax({ // type: 'post', // url: sSource, // data: aoData, // dataType: 'json', // success: fnCallback // }); //}, }); checkAll(table);//全選功能 return oTable; } }; return DataTablePublic; }();
js 呼叫
引入封裝好的js <script src="~/Scripts/hf_datatables.js"></script>
<script language="javascript" type="text/javascript"> var table; var columns; var columnDefs; var reqData = { "id": 0 }; $(document).ready(function () { table = jQuery('#myTable'); columns = [ { data: "moduleId", title: "標識" }, { data: "moduleName", title: "功能名稱" }, { data: "moduleUrl", title: "URL地址" }, { data: "moduleZdy", title: "是否可自定義" }, { data: "moduleId", title: "操作" } ]; columnDefs = [ { //最後一列 targets: columns.length - 1, render: function (data, type, row, meta) { var edit = '<button class="btn btn-info btn-sm" onclick="openModuleEdit(' + '\'' + row.moduleName + '\',' + '\'' + row.moduleUrl + '\'' + ',' + '\'' + row.moduleId + '\'' + ',' + '\'' + row.moduleZdy + '\'' + ')">' + '<i class="fa fa-pencil"></i></button>'; var del = '<button class="btn btn-danger btn-sm"onclick="del(' + row.moduleId + ')">' + '<i class="fa fa-trash-o"></i></button>'; return edit + del; } } ];
reqData = { "id": 0 }; Hf_DataTable.serverTable(table, false, "/SeniorManager/ModuleTable", reqData, columns, columnDefs, null); })
////頁面重新整理過載 function reload() { var param = { id: 2 }; //post引數 table.fnSettings().ajax.data = param $("#myTable").dataTable().fnDraw(false); //true重新整理頁面到第一頁，false當前頁 }
</script>