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 进行relayouttable.ajax.reload();//根据筛选条件重新发起ajax请求，reload tablevar 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");//生成的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");}}}

以上是datatables使用學習的詳細內容。更多資訊請關注PHP中文網其他相關文章！