1. 程式人生 > >datatable by Ajax 前端引數詳解

datatable by Ajax 前端引數詳解

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;
}