最近在做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>";}}]});
常用apitable.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使用学习的详细内容。