数据过滤&行突出显示不一起工作

时间:2016-11-10 04:00:15

标签: javascript datatables

我有一个包含行突出显示和表格排序的数据表,但是当我运行两段代码时,突出显示的那一段和过滤的一段我得到一个错误。

我理解为什么我会得到错误,但无论我如何编写代码,一旦我将它们连接在一起代码停止工作,下面是我的javascipt代码和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');
     }
    } 
 });
});

所以我已经更新了我的代码并且它不再出现错误,但突出显示现在也无法正常工作。

1 个答案:

答案 0 :(得分:0)

正确的代码如下所示:

$.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');
            }
        }
    });
});

请参阅updated jsFiddle以获取代码和演示。