DataTable根据条件修改行颜色和特定格颜色

it2025-01-07  8

JS代码如下:

$.get("/terminal_get_all_app/", function (cur_data) { // {#alert("Data Loaded: " + cur_data);#} table = $('#terminal_datatables').DataTable({ responsive: true, data: eval(cur_data), //lengthMenu: [5, 10, 20, 30],//这里也可以设置分页,但是不能设置具体内容,只能是一维或二维数组的方式,所以推荐下面language里面的写法。 paging: true,//分页 ordering: true,//是否启用排序 order: [[ 0, 'desc' ]],//列表降序 searching: true,//搜索 processing: true, //scrollX:true, language: { lengthMenu: '<select class="form-control input-xsmall">' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="50">50</option>' + '<option value="100">100</option>' + '</select> 条记录',//左上角的分页大小显示。 search: '<span >搜索:</span>',//右上角的搜索文本,可以写html标签 paginate: {//分页的样式内容。 previous: "上一页", next: "下一页", first: "首页", last: "末页" }, zeroRecords: "没有内容",//table tbody内容为空时,tbody的内容。 //下面三者构成了总体的左下角的内容。 //info: "总共_PAGES_ 页,显示第_START_ 到第 _END_ ,筛选之后得到 _TOTAL_ 条,初始_MAX_ 条 ",//左下角的信息显示,大写的词为关键字。 info: "显示 _START_ 到 _END_ 条,共 _TOTAL_ 条",//左下角的信息显示,大写的词为关键字。 infoEmpty: "0条记录",//筛选为空时左下角的显示。 infoFiltered: ""//筛选之后的左下角筛选提示, }, pagingType: "first_last_numbers", //分页样式的类型 fnRowCallback: RowCallBack, //回调函数 }); }); function RowCallBack(nRow, data, iDisplayIndex, iDisplayIndexFull) { if (data[6].indexOf("异常") != -1) { //设置满足条件行的背景颜色 $(nRow).css("background", "#FFB6C1"); //设置满足条件行列的字体颜色 $('td', nRow).eq(6).css('font-weight', "bold").css("color", "red"); } }

效果图如下:

最新回复(0)