datatables使用學習

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

table.relayout();//顯示table區域的大小發生改變時（eg：window resize... ） 可調用其布局函數table.fixedColumns().relayout();//在使用了fixedcolumns時，當table relayout后有時候也需要手動將fixedcolumns 進行relayouttable.ajax.reload();//根據篩選條件重新發起ajax請求，reload tablevar column = table.column(index);//針對index列進行隱藏or顯示，適用于datatables過長時不同view mode下列的顯示column.visible(false);

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

function handleHeader(){var normalHeader = $(".normalHeader");var dataTables_scroll = $(".dataTables_scroll");//生成的datatabledivvar DTFC_LeftWrapper = $(".DTFC_LeftWrapper");//fixedColumns 生成的左邊兩個固定columnsif((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");}}}