DataTables封装的操作

var DatatableHelper = function() {

var tableOptions; // main options
var dataTable; // datatable object
var table; // actual table jquery object
var tableContainer; // actual table container object
var tableWrapper; // actual table wrapper jquery object
var tableInitialized = false;
var ajaxParams = {}; // set filter mode
var the;

var countSelectedRecords = function() {
var selected = $('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked', table).size();
var text = tableOptions.dataTable.language.metronicGroupActions;
if (selected > 0) {
$('.table-group-actions > span', tableWrapper).text(text.replace("_TOTAL_", selected));
} else {
$('.table-group-actions > span', tableWrapper).text("");
}
};

return {

//main function to initiate the module
init: function(options) {

if (!$().dataTable) {
return;
}

the = this;

// default settings
options = $.extend(true, {
src: "", // actual table
filterApplyAction: "filter",
filterCancelAction: "filter_cancel",
resetGroupActionInputOnSuccess: true,
loadingMessage: 'Loading...',
dataTable: {
//"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r><'table-responsive't><'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>", // datatable layout
//"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r><''t><'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>", // datatable layout
"pageLength": 10, // default records per page
"language": {
"metronicGroupActions": "_TOTAL_ records selected: ",
"metronicAjaxRequestGeneralError": "Could not complete request. Please check your internet connection",

// data tables spesific
//"lengthMenu": "<span class='seperator'>|</span>每页 _MENU_ 条记录",
"info": "显示 _START_ 到 _END_ 项,共 _TOTAL_ 项",
"infoEmpty": "显示0项",
"emptyTable": "未有相关数据",
"zeroRecords": "对不起,查询不到任何相关数据",
"paginate": {
"previous": "上一页",
"next": "下一页",
"last": "最后一页",
"first": "第一页",
"page": "页",
"pageOf": "of"
},
"sProcessing": "处理中…",
"sSearch": "查找:"
},
"orderCellsTop": true,
"columnDefs": [{ // define columns sorting options(by default all columns are sortable extept the first checkbox column)
'orderable': false,
'targets': [0]
}],

//"pagingType": "bootstrap_full_number", // pagination type(bootstrap, bootstrap_full_number or bootstrap_extended)
"autoWidth": false, // disable fixed width and enable fluid table
"processing": false, // enable/disable display message box on record load
"serverSide": true, // enable/disable server side ajax loading

"ajax": { // define ajax settings
"url": "", // ajax URL
"type": "POST", // request type
"timeout": 20000,
"traditional": false,
"data": function(data) { // add request parameters before submit
$.each(ajaxParams, function(key, value) {
data[key] = value;
});
App.blockUI({
message: tableOptions.loadingMessage,
target: tableContainer,
overlayColor: 'none',
cenrerY: true,
boxed: true
});
},
"dataSrc": function(res) { // Manipulate the data returned from the server
if (res.customActionMessage) {
App.alert({
type: (res.customActionStatus == 'OK' ? 'success' : 'danger'),
icon: (res.customActionStatus == 'OK' ? 'check' : 'warning'),
message: res.customActionMessage,
container: tableWrapper,
place: 'prepend'
});
}

if (res.customActionStatus) {
if (tableOptions.resetGroupActionInputOnSuccess) {
$('.table-group-action-input', tableWrapper).val("");
}
}

if ($('.group-checkable', table).size() === 1) {
$('.group-checkable', table).attr("checked", false);
$.uniform.update($('.group-checkable', table));
}

if (tableOptions.onSuccess) {
tableOptions.onSuccess.call(undefined, the, res);
}

App.unblockUI(tableContainer);

return res.data;
},
"error": function() { // handle general connection errors
if (tableOptions.onError) {
tableOptions.onError.call(undefined, the);
}

App.alert({
type: 'danger',
icon: 'warning',
message: tableOptions.dataTable.language.metronicAjaxRequestGeneralError,
container: tableWrapper,
place: 'prepend'
});

App.unblockUI(tableContainer);
}
},

"drawCallback": function(oSettings) { // run some code on table redraw
if (tableInitialized === false) { // check if table has been initialized
tableInitialized = true; // set table initialized
table.show(); // display table
}
App.initUniform($('input[type="checkbox"]', table)); // reinitialize uniform checkboxes on each table reload
countSelectedRecords(); // reset selected records indicator

// callback for ajax data load
if (tableOptions.onDataLoad) {
tableOptions.onDataLoad.call(undefined, the);
}
}
}
}, options);

tableOptions = options;

// create table's jquery object
table = $(options.src);
tableContainer = table.parents(".table-container");

// apply the special class that used to restyle the default datatable
var tmp = $.fn.dataTableExt.oStdClasses;

$.fn.dataTableExt.oStdClasses.sWrapper = $.fn.dataTableExt.oStdClasses.sWrapper + " dataTables_extended_wrapper";
$.fn.dataTableExt.oStdClasses.sFilterInput = "form-control input-xs input-sm input-inline";
$.fn.dataTableExt.oStdClasses.sLengthSelect = "form-control input-xs input-sm input-inline";

// initialize a datatable
dataTable = table.DataTable(options.dataTable);

// revert back to default
$.fn.dataTableExt.oStdClasses.sWrapper = tmp.sWrapper;
$.fn.dataTableExt.oStdClasses.sFilterInput = tmp.sFilterInput;
$.fn.dataTableExt.oStdClasses.sLengthSelect = tmp.sLengthSelect;

// get table wrapper
tableWrapper = table.parents('.dataTables_wrapper');

// build table group actions panel
if ($('.table-actions-wrapper', tableContainer).size() === 1) {
$('.table-group-actions', tableWrapper).html($('.table-actions-wrapper', tableContainer).html()); // place the panel inside the wrapper
$('.table-actions-wrapper', tableContainer).remove(); // remove the template container
}
// handle group checkboxes check/uncheck
$('.group-checkable', table).change(function() {
var set = table.find('tbody > tr > td:nth-child(1) input[type="checkbox"]');
var checked = $(this).prop("checked");
$(set).each(function() {
$(this).prop("checked", checked);
});
$.uniform.update(set);
countSelectedRecords();
});

// handle row's checkbox click
table.on('change', 'tbody > tr > td:nth-child(1) input[type="checkbox"]', function() {
countSelectedRecords();
});

// handle filter submit button click
table.on('click', '.filter-submit', function(e) {
e.preventDefault();
the.submitFilter();
});

// handle filter cancel button click
table.on('click', '.filter-cancel', function(e) {
e.preventDefault();
the.resetFilter();
});
},

submitFilter: function() {
the.setAjaxParam("action", tableOptions.filterApplyAction);

// get all typeable inputs
$('textarea.form-filter, select.form-filter, input.form-filter:not([type="radio"],[type="checkbox"])', table).each(function() {
the.setAjaxParam($(this).attr("name"), $(this).val());
});

// get all checkboxes
$('input.form-filter[type="checkbox"]:checked', table).each(function() {
the.addAjaxParam($(this).attr("name"), $(this).val());
});

// get all radio buttons
$('input.form-filter[type="radio"]:checked', table).each(function() {
the.setAjaxParam($(this).attr("name"), $(this).val());
});

dataTable.ajax.reload();
},

resetFilter: function() {
$('textarea.form-filter, select.form-filter, input.form-filter', table).each(function() {
$(this).val("");
});
$('input.form-filter[type="checkbox"]', table).each(function() {
$(this).attr("checked", false);
});
the.clearAjaxParams();
the.addAjaxParam("action", tableOptions.filterCancelAction);
dataTable.ajax.reload();
},

getSelectedRowsCount: function() {
return $('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked', table).size();
},

getSelectedRows: function() {
var rows = [];
$('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked', table).each(function() {
rows.push($(this).val());
});

return rows;
},

setAjaxParam: function(name, value) {
ajaxParams[name] = value;
},

addAjaxParam: function(name, value) {
if (!ajaxParams[name]) {
ajaxParams[name] = [];
}

skip = false;
for (var i = 0; i < (ajaxParams[name]).length; i++) { // check for duplicates
if (ajaxParams[name][i] === value) {
skip = true;
}
}

if (skip === false) {
ajaxParams[name].push(value);
}
},

clearAjaxParams: function(name, value) {
ajaxParams = {};
},

getDataTable: function() {
return dataTable;
},

getTableWrapper: function() {
return tableWrapper;
},

gettableContainer: function() {
return tableContainer;
},

getTable: function() {
return table;
}

};

};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值