为了账号安全,请及时绑定邮箱和手机立即绑定

DataTable常用API

标签:
JQuery

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();    });

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消