1.初始化datatablescss
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從後臺獲取數據,並攜帶自定義參數node
myTable.DataTables({ serverSide: true, ajax: { url: '數據獲取地址', type: 'POST',//獲取方式 data: { 自定義參數名:參數值 } }, }).on('preXhr.dt', function ( e, settings, data ) { myTable.settings().ajax.params().自定義參數名=參數值 })
3.顯示編號ajax
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時想進行相同值的單元格合併,可是網上找了很多方法都沒有頭緒。因而本身測試並編寫了該段代碼。ide
$('#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(); });