1.初始化datatables

創(chuàng)新互聯(lián)公司主營長白網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā)公司,長白h5成都小程序開發(fā)搭建,長白網(wǎng)站營銷推廣歡迎長白等地區(qū)企業(yè)咨詢

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

2.使用ajax從后臺獲取數(shù)據(jù)，并攜帶自定義參數(shù)

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

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進(jìn)行相鄰行相同數(shù)據(jù)合并單元格
在使用databale時(shí)想進(jìn)行相同值的單元格合并，但是網(wǎng)上找了不少方法都沒有頭緒。于是自己測試并編寫了該段代碼。

    $('#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

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

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