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顶部将其固定，实现代码以下：

一、给document绑定滚动事件

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

二、滚动到顶部，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");
            }
        }
    }