DataTable常用API
標(biāo)簽:
JavaScript
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: "搜索: "http://搜索提示字符 }, 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(); });
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦