DataTable常用API

1.初始化datatables

创新互联公司主营长白网站建设的网络公司,主营网站建设方案,重庆APP开发公司,长白h5成都小程序开发搭建,长白网站营销推广欢迎长白等地区企业咨询

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

5.窗口改变大小后自动改变大小

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