datatables使用學習

最近在做pc端網頁開發時用到了datatables，不得不說這個工具使用還是很方便的。（ps:大數據量時建議使用伺服器端分頁而非前端分頁）

現將相關配置使用記錄如下

配置

var table = $("#table").DataTable({
        "ajax": {
            url: "/getusr/",
            type: "POST",
            data: function (d) {
                d.group = $(".group")[0].innerText;//ajax傳遞參數
            }
        },
        "columns": [{"data": "name"},
            {"data": "id"},
            {"data": "pass"}],
        "searching": true,
        "ordering": false,//是否排序，否時直接根據數組順序顯示
        "paging": true,
        "info": true,
        "autoWidth": true,//自動調整寬度
        "scrollX": true,
        "sScrollX": "100%",
        "fixedColumns": {leftColumns: 2, bAll: true, "sHeightMatch": "auto"},//左側邊欄多少個列固定在左邊。需要引入第三方插件，datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js
        "fnDrawCallback": function (oSettings) {
            //重繪回調函數
            $(".select").msDropDown();
        },
        "columnDefs": [
            {
                "targets": [0],
                "width": "30%",
                "className": "j-thead0",
                "render": function (data) {
                    return "<div><a>" + data + "</a></div>";
                }
            }
        ]
    });

常用api

table.relayout();//顯示table區域的大小發生改變時（eg：window resize... ） 可調用其佈局函數

table.fixedColumns().relayout();//在使用了fixedcolumns時，當table relayout後有時候也需要手動將fixedcolumns 進行relayout

table.ajax.reload();//根據篩選條件重新發起ajax請求，reload table

var column = table.column(index);//針對index列進行隱藏or顯示，適用於datatables過長時不同view mode下列的顯示
column.visible(false);

附加功能添加

向上滾動頁面，當datatables表頭接觸到window頂部將其固定，實現代碼如下：

1、給document綁定滾動事件

document.addEventListener("scroll",handleHeader);//

2、滾動到頂部，clone header且fixed，否則將其hide or delete(datatbles 發生佈局上任何改變該clone生成的header要進行刪除更新，否則header對不上，o(╯□╰)o)

function handleHeader(){

        var normalHeader = $(".normalHeader");
        var dataTables_scroll = $(".dataTables_scroll");//生成的datatablediv
        var DTFC_LeftWrapper = $(".DTFC_LeftWrapper");//fixedColumns 生成的左邊兩個固定columns

        if((normalHeader.offset().top-$(window).scrollTop())<5){

            if(!headerCreated){
                newHeader = dataTables_scroll.clone().addClass("fixedHeader newHeader");
                newLeft = DTFC_LeftWrapper.clone().addClass("fixedLeft newLeft");

                $(newHeader).find(".dataTables_scrollBody").css("display","none");
                $(newLeft).find(".DTFC_LeftBodyWrapper").css("display","none");

                var scrollWidth = dataTables_scroll.width();
                newHeader.css("width",scrollWidth);
                newLeft.css("left","");

                newHeader.appendTo( ".DTFC_ScrollWrapper" );
                newLeft.appendTo( ".DTFC_ScrollWrapper" );

                headerCreated = true;
            }else{
                newHeader.removeClass("hidden");
                newLeft.removeClass("hidden");
            }
        }else{
            if(newHeader||newLeft){
                newHeader.addClass("hidden");
                newLeft.addClass("hidden");
            }
        }
    }