当表格单元格匹配时，数据表突出显示超出第一页页面的行

当试图突出显示第一页页面之外的行时，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

当表格单元格匹配时，数据表突出显示超出第一页页面的行

回答

相关问题