datatable by Ajax 前端引數詳解
阿新 • • 發佈:2019-02-10
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; }