Datatable 实现ajax动态分页、设计各列单元格dom格式。

id:表格id
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;
}

原文链接：https://www.f2er.com/ajax/163131.html