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頂部將其固定，實現代碼如下：

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