封装
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" οnclick="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"οnclick="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>