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();
});
网页题目:DataTable常用API
标题URL:http://pwwzsj.com/article/jjgggs.html