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(); });
随时随地看视频
