datatables使用學習

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

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

配置

var table = $("#table").DataTable({
        "ajax": {
            url: "/getusr/",
            type: "POST",
            data: function (d) {
                d.group = $(".group")[0].innerText;//ajax傳遞參數
            },
             "dataSrc": function (data) {
                    return data.data1;//做用同sAjaxDataProp
            }
        },
        "columns": [{"data": "name"},
            {"data": "id"},
            {"data": "pass"}],
        "searching": true,
        "ordering": false,//是否排序，否時直接根據數組順序顯示
        "paging": true,
        "sAjaxDataProp": "data1",//取ajax返回的結果中的data1字段
        "info": true,
        "autoWidth": true,//自動調整寬度
        "scrollX": true,
        "sScrollX": "100%",
        "bLengthChange": false, //hide the "show 10 entries"
                           
        "fixedColumns": 
            {leftColumns: 2, bAll: true,"sHeightMatch":"auto"},
             //左側邊欄多少個列固定在左邊。須要引入第三方插件dataTables.fixedC
             olumns.js
        "fnDrawCallback": function (oSettings) {
            //重繪回調函數
            $(".select").msDropDown();
        },
        "dom": 'Blfrtip',
                   //新增的buttons好比excel下載，按需引入extensions/Buttons/1.3.1/js/dataTables.buttons.min.js、
                   buttons.flash.min.js、but tons.html5.min.js、buttons.print.min.js. Blfrtip中的l表明引入pagelength的select
        "buttons": [{
                extend: 'excel'//支持圖片，pdf等下載.
                }，
               {
                    extend: 'excelHtml5',
                    title: function getFileName(){ //動態設置下載的excel文件名稱.不想動態的話直接寫一個字符串用做filename便可'mytable'
                        return $("#name").text();
                    },
                    className: 'btn-excel',
                    exportOptions:{"columns":view=="1"?".view1":".view2"},//經過columns設置定製excel下載的行或者列，exportoptions支持多種寫法，此處使用的jQuery的寫法。(具體詳情參見)[https://datatables.net/reference/button/excel]
                    footer: true
                }
        ],
        "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頂部將其固定，實現代碼以下：

一、給document綁定滾動事件

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

二、滾動到頂部，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");
            }
        }
    }