當表格單元格匹配時，數據表突出顯示超出第一頁頁面的行

當試圖突出顯示第一頁頁面之外的行時，Datatables插件給了我一些問題。當表格單元格匹配時，數據表突出顯示超出第一頁頁面的行

正如您將在下面的示例JSFiddle中看到的，我正在對負載上的位置列進行排序。當一行中有兩個或多個相關位置時，我們突出顯示父錶行。我遇到的問題是，如果在最後一個錶行中的第一頁上有一個位置，並且與第一個位置上的第一個位置匹配第一頁上的最後一個表格行的第二頁未突出顯示。我在這裏使用的例子是開發人員的職位。

的jsfiddle

https://jsfiddle.net/ebRXw/563/

$(document).ready(function() { 

    $('table').dataTable({ 
     "paging": true, 
      "ordering": true, 
      "filter": false, 
      "length": false, 
      "info": false, 
      "order": [ 
      [1, "asc"] 
     ] 
    }); 

    highlight(); 

    $('table').on('draw.dt', function() { 
     if ($("thead th:nth-child(2)").hasClass("sorting_desc") || $("thead th:nth-child(2)").hasClass("sorting_asc")) { 
      highlight(); 
     } else { 
      $("td").removeClass("info"); 
      $("td").css("border-bottom", ""); 
     } 
    }); 

    function highlight() { 

     var duplicate = false; 

     $("table tbody tr").each(function() { 
      var $current = $(this).children(":nth-child(2)"); 
      var $next = $(this).next().children(":nth-child(2)"); 
      if ($current.text() === $next.text() && !duplicate) { 
       duplicate = true; 
       $current.parent().children().addClass("info"); 
       $current.parent().prev().children().css("border-bottom", "1px solid #333"); 
      } else if ($current.text() === $next.text() && duplicate) { 
       $current.parent().children().addClass("info"); 
      } else if ($current.text() !== $next.text() && duplicate) { 
       $current.parent().children().addClass("info"); 
       $current.parent().children().css("border-bottom", "1px solid #333"); 
       duplicate = false; 
      } else { 
       $current.parent().children().removeClass("info"); 
       $current.parent().children().css("border-bottom", ""); 
      } 
     }); 
    } 

});

來源

2015-07-13 user262430

在數據表僅可見行中DOM的存在，這就是爲什麼next()和prev()不按預期工作。

您可以使用rows({ search: 'applied').nodes()獲取應用了過濾的所有行。

此外，由於您正在處理整個數據集，因此附加到order.dt事件而不是在訂購時僅突出顯示一次行是有意義的。

有關代碼和演示，請參見updated jsFiddle。

但是我會建議看Row grouping example，它在可用性和代碼方面似乎更好。

來源

2015-07-13 11:31:06

在highlight功能，你只着眼於當前頁面的數據。這就是爲什麼「開發人員」行沒有看到它在其他頁面上實際上有重複行。

你應該做的是看整個表的數據。

var data = $('table').dataTable().fnGetData();

在當前頁面中的每一行，你可以比看看有沒有在表中重複的行地方致電：您可以通過撥打該highlight功能開始下面這樣做

var isDup = $.grep(data, function(d) { return d[1] === $current.text(); }).length > 1;

根據這個isDup變種你可以把CSS的信息和邊框底部

來源

2015-07-13 06:49:00

當表格單元格匹配時，數據表突出顯示超出第一頁頁面的行

回答

相關問題