datatables usage learning-JS Tutorial-php.cn

datatables usage learning

巴扎黑

Release： 2017-06-26 14:22:27

Original

1766 people have browsed it

I recently used datatables when doing web development on the PC side. I have to say that this tool is very convenient to use. (ps: It is recommended to use server-side paging instead of front-end paging when the amount of data is large)

The relevant configuration usage records are as follows

Configuration

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

Commonly used 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);Copy after login

Additional functions added

Scroll the page upwards and fix it when the datatables header touches the top of the window. The implementation code is as follows:

1. Bind the scroll event to the document

document.addEventListener("scroll",handleHeader);//Copy after login

2. Scroll to the top, clone the header and fix it, otherwise hide or delete (datatables) any changes in the layout of the header generated by the clone You need to delete and update, otherwise the header will not match, 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");}}}Copy after login

The above is the detailed content of datatables usage learning. For more information, please follow other related articles on the PHP Chinese website!