这里主要介绍两个函数:aoColumnDefs和createdRow
datatables的使用方式非常简单,自行查阅资料,直接上代码:
var t;
t = $("#accountTbl").DataTable({
searching: true,
processing: true,
dom: "<'row'<'col-sm-12'tr>> <'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>",
language: {
"info": "显示从 _START_ 到 _END_ 总计 _TOTAL_ 条记录",
"infoEmpty": "显示从 0 到 0 of 0 条记录",
"lengthMenu": "每页显示 _MENU_ 条记录",
"emptyTable": "查询无记录",
"loadingRecords": "加载中...",
"zeroRecords": "查询无记录",
},
// aoColumnDefs:[
// {"sClass":"col_class","aTargets":[0]},{"sClass":"cos_class","aTargets":[1]}],
createdRow: function ( row, data, index ) {
if ( index %2 == 0 ) {
$('td', row).css('font-weight',"bold").css("color","#c43ff6");
}
},
buttons: ["print", "copyHtml5", "excelHtml5", "csvHtml5", "pdfHtml5"],
select: true,
rowId: 'id',
serverSide: true,
ajax: {
"url": '',
},
columns: [{
data: "id",
"orderable": true,"width":"50px"
},
],
})
1、aoColumnDefs:
这个函数是修改列显示的,{"sClass":"col_class","aTargets":[0]},"aTargets"这个参数代表,从左到右第一列,第二列就是[1],这个col_class需要自己在前端定义。
<style>
.col_class{
color: #ff7e29;
}
.cos_class{
color: #2a1cf6;
}
</style>
2、createdRow:
这个函数是修改行显示的,createdRow: function ( row, data, index ) {},三个参数row代表行,data表示你传入的字段,意思就是说你可以根据字段的内容进行过滤显示,
index是行的索引值。
隔行换色显示:
if ( index %2 == 0 ) {
$('td', row).css('font-weight',"bold").css("color","#c43ff6");
}
根据id显示:
if ( data['id] %2 == 0 ) {
$('td', row).css('font-weight',"bold").css("color","#c43ff6");
}
ps:如果想要修改td标签的长度,可以在columns中进行限制的。
columns: [{
data: "id",
"orderable": true,"width":"50px"
},
],