Datatable 实现ajax动态分页、设计各列单元格dom格式。
ordering:是否可以排序
paging:在所有表数据已加载完毕后,是否分页显示
Processing:是否异步载入未显示表格数据
aoColumnDefs:列控制,aTargets表示所选控制的列,mRender表示对所选列的操作。
bProcessing:加载数据时候是否显示进度条
serverSide:是否从服务器加载数据
tableTools:datatable 扩展工具库,本函数使用到excel导出按钮(按钮仅做事件触发器使用,fnclick定义事件,向后台发送请求,excel导出功能已在后端重写)
fnDrawCallback:页面改变的回调函数
ajax:url表示表数据来源地址,每次排序、翻页、搜索均会发送ajax请求,error表示请求失败回调函数
以上均为dataTable自带API,查询详情可访问网站:http://datatables.net/ 。
以下内容为DataTableByAjax原创参数tableObj:
columnsSetting:
length:表格列数,
showColumns:需要显示的数据在数组data中对应键值,默认为data中的所有键值,
edit_columns:对各个列进行再编辑,每个数组第一个参数表示第几列数组(从0开始),第二个参数是对该列每个单元格格式进行定义(如将原数据变做超链接,并附加属性)
fnDrawCallback:在datatable自带fnDrawCallback中使用,每当ajax请求导致页面改变时调用函数
function initiateDataTableByAjax(tableObj) {
require(['datatables', 'datatables-tabletools'], function() {
tableObj.downLoadURL="/tabledbexport"+tableObj.url.slice("/tabledb".length);
var table = $('#' + tableObj.id).dataTable({
"paging" : tableObj.isPaging,
"ordering" : tableObj.ordering,
"dom" : 'T<"clear">lfrtip',
"bProcessing" : false,
"aoColumnDefs" : tableObj.aoColumnDefs? tableObj.aoColumnDefs:[{
"aTargets": [ '_all' ],
"mRender": function ( data, type, full ) {
if(data!=null){
return '<div class="excoll">'+data+'</div>';
}else{
return '';
}
}
}],
"processing" : true,
"serverSide" : true,
"tableTools" : {
"sSwfPath" : "/bower_components/datatables-tabletools/swf/copy_csv_xls_pdf.swf",
"aButtons" : [{
"sExtends" : "xls",
"sTitle" : tableObj.exportName,
"sAction" : "flash_copy",
"fnClick" : function(nButton, oConfig, oFlash) {
var params = table.fnSettings().aaSorting;//[0,"asc"]
var search_value=table.fnSettings().oPreviousSearch.sSearch;
var connector = "?draw=0&";
if(tableObj.downLoadURL.indexOf("?")!=-1){
connector = "&draw=0&";
}
var export_url= tableObj.downLoadURL+connector+"orderColumn="+params[0][0]+"&orderDir="+params[0][1]+"&search="+search_value;
location.href = export_url;
}
}]
},
"ajax" : {
"url" : tableObj.url,
error: function (xhr, error, thrown) {
var wid = $('#' + tableObj.id).parents(".widget-content").parent().parent().attr("id");
xhr.responseText = thrown;
showErrorMsg(wid, xhr);
}
},
columns : addAttributesForSomeColumns(tableObj.columnsSetting),
"fnDrawCallback" : function(oSettings) {
if(tableObj.fnDrawCallback){
tableObj.fnDrawCallback();
}
}
});
});
}function addAttributesForSomeColumns(columnsSetting) {
var columns_array = new Array();
if (columnsSetting.showColumns) {
for (i in columnsSetting.showColumns) {
var cc = {
data : columnsSetting.showColumns[i],
};
columns_array.push(cc);
};
} else {
for (var i = 0; i < columnsSetting.length; i++) {
var cc = {
data : i,
};
columns_array.push(cc);
};
}
if (columnsSetting.edit_columns) {
$.each(columnsSetting.edit_columns, function(index, element) {
columns_array[element[0]].data = null;
columns_array[element[0]].render = element[1];
});
};
return columns_array;
}