数据表过滤&行高亮不能一起工作

Datatable Filtering & Row Highlighting not working together

本文关键字：不能 一起 工作 高亮 过滤 数据表      更新时间：2023-09-26

我有一个数据表，有行突出显示和表排序，但是当我运行两段代码时，一个用于突出显示，一个用于过滤，我得到一个错误。

我明白为什么我得到错误，但无论我如何写代码，一旦我把它们连接在一起的代码停止工作，下面是我的javascript代码和链接到jsfiddle的例子。

  $(document).ready( function () {
  $('#example').dataTable( {
"aoColumns": [
    null,
    null,
    null,
    null,
    null,
    null,
    { "sType": "date-uk" },
    { "sType": "date-uk" },
    { "sType": "date-uk" },
    null,
    null,
    null
 ]
 });
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
var ukDatea = a.split('/');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
},
 "date-uk-asc": function ( a, b ) {
 return ((a < b) ? -1 : ((a > b) ? 1 : 0));
 },
 "date-uk-desc": function ( a, b ) {
 return ((a < b) ? 1 : ((a > b) ? -1 : 0));
 }
 });
fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
   if (aData[3] == "PV PLUS") {
       $(nRow).addClass('highlight');
   }
   if (aData[3] == "ECO1") {
       $(nRow).addClass('highlight1');
   }
   if (aData[3] == "ECO2") {
       $(nRow).addClass('highlight2');
   }
  } 
 });
链接

JSfiddle

编辑代码
 $(document).ready( function () {
 $('#example').dataTable( {
"aoColumns": [
    null,
    null,
    null,
    null,
    null,
    null,
    { "sType": "date-uk" },
    { "sType": "date-uk" },
    { "sType": "date-uk" },
    null,
    null,
    null
   ]
  });
  jQuery.extend( jQuery.fn.dataTableExt.oSort, {
  "date-uk-pre": function ( a ) {
  var ukDatea = a.split('/');
   return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    },
    "date-uk-asc": function ( a, b ) {
     return ((a < b) ? -1 : ((a > b) ? 1 : 0));
   },
     "date-uk-desc": function ( a, b ) {
     return ((a < b) ? 1 : ((a > b) ? -1 : 0));
   }
  });
 var table = $('#example').DataTable({
    fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
   if (aData[3] == "PV PLUS") {
       $(nRow).addClass('highlight');
   }
   if (aData[3] == "ECO1") {
       $(nRow).addClass('highlight1');
   }
   if (aData[3] == "ECO2") {
       $(nRow).addClass('highlight2');
     }
    } 
 });
});

所以我已经更新了我的代码，它不再出错了，但是高亮显示也不工作了。

正确代码如下:

$.extend($.fn.dataTableExt.oSort, {
    "date-uk-pre": function(a) {
        var ukDatea = a.split('/');
        return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    },
    "date-uk-asc": function(a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "date-uk-desc": function(a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});
$(document).ready(function() {
    $('#example').DataTable({
        'columnDefs': [
            { 'type': 'date-uk', 'targets': [6,7,8] }
        ],
        'rowCallback': function( row, data, index ){
            if (data[3] == "PV PLUS") {
                $(row).addClass('highlight');
            }
            if (data[3] == "ECO1") {
                $(row).addClass('highlight1');
            }
            if (data[3] == "ECO2") {
                $(row).addClass('highlight2');
            }
        }
    });
});

参见更新后的jsFiddle获取代码和演示

相关文章：