DataTable常用API

1.初始化datatables

myTable=$('.table-sort').DataTable({
    serverSide: true,//開啓後臺數據獲取
    processing: true,//顯示加載提示
    pageLength: 100,//每頁默認顯示條目
    lengthChange: true,//開啓每頁顯示數量選擇
    lengthMenu: [10,50,100,150,300,500,1000,5000],//每頁可顯示條目選擇列表
    ordering: true,//開啓排序
    bStateSave: true,//狀態保存
    searching:true,//開啓搜索
    language: {
        search: "搜索: "//搜索提示字符
    },
    ajax: {
        url: '數據獲取地址',
        type: 'POST',//獲取方式
        data: {
            自定義參數名:參數值
        }
    },
    fnCreatedRow: function(nRow, aData, iDataIndex) {
        $(nRow).addClass('text-c');//全局增加樣式
    },
    columns: [
        {
            data:'數據名',
            className:‘要增加的樣式’,
            render: function ( data, type, row ) {
                //處理數據後需要使用return返回
                return data;
            }
        },
    ]
})

2.使用ajax從後臺獲取數據，並攜帶自定義參數

    myTable.DataTables({
            serverSide: true,
            ajax: {
                url: '數據獲取地址',
                type: 'POST',//獲取方式
                data: {
                    自定義參數名:參數值
                }
            },
        }).on('preXhr.dt', function ( e, settings, data ) {
            myTable.settings().ajax.params().自定義參數名=參數值
        })

3.顯示編號

    myTable.on( 'draw', function () {
        myTable.column(要顯示編號的列索引值).nodes().each(function(cell,i){  
            i = i + 1;  
            var page = myTable.page.info();  
            var pageno = page.page;  
            var length = page.length;  
            var columnIndex = (i+pageno*length);  
            cell.innerHTML = columnIndex;  
        });
    })

4.使用datatable進行相鄰行相同數據合併單元格
在使用databale時想進行相同值的單元格合併，但是網上找了不少方法都沒有頭緒。於是自己測試並編寫了該段代碼。

    $('#id).DataTable().on( 'draw', function () {
        var rows = [],nodes = myTable.column(需要合併的列索引值).nodes();
        nodes.each(function(cell,i){
            if(i != 0) {
                if($(cell).text() == $(nodes[i-1]).text()) {
                    var row = rows.pop();
                    rows.push({
                        cell: cell,
                        rowspan: row.rowspan+1,
                    });
                } else {
                    rows.push({
                        cell : cell,
                        rowspan: 1,
                    });
                }
            } else {
                rows.push({
                    cell : cell,
                    rowspan: 1,
                });
            }
        });
        var index = 0;
        $(rows).each(function(cell,item){
            $(nodes[index]).attr('rowspan',item.rowspan);
            for(var i = 1; i<item.rowspan;i++){
                $(nodes[index+i]).remove();
            }
            index += item.rowspan;
        });
    })

5.窗口改變大小後自動改變大小

    $(window).resize(function(){
        $('.table-sort').css('width','100%') //如果選定的元素不是自適應，則需要使用js修改選定元素的寬度
        myTable.columns.adjust().draw();
    });