如何使用数据表以相同颜色显示重复的行 [英] How to display duplicate rows in same color using datatable

问题描述

我正在使用 DataTable 插件在表中显示行.我想用相同的颜色显示重复的行. 我怎么能做到这一点有人请帮助我. 在下面的示例 Black Winters 中，我们有重复的行. 我想用不同的颜色显示这些类型的重复行. 就像我有重复的数据 Black Winters 和 Orange ，我想用不同的颜色组合显示这两个重复的行，例如: Black Winters 红色和橙色颜色将类似于蓝色.

I am using DataTable plugin for show rows in table. I want to show duplicate rows in same color. How i can do this someone pls help me. In the below example Black Winters we have duplicate row. I want to show these type of duplicate rows in different colors. Like I have duplicate data Black Winters and Orange i want to show these both duplicate rows in different color combination eg.: Black Winters color will be red and Orange color will be like blue.

$(document).ready(function() {
  var data = [{
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$3,120"
    },
    {
      "name": "Black Winters",
      "position": "Project Engineer",
      "salary": "$1,300"
    },
    {
      "name": "Black Winters",
      "position": "Project Engineer",
      "salary": "$1,300"
    }
  ];
  $("#table1").DataTable({
    data: data,
    columns: [{
        data: 'name'
      },
      {
        data: 'position'
      },
      {
        data: 'salary'
      },
    ]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
  <thead>
    <tr>
      <th>name</th>
      <th>position</th>
      <th>salary</th>
    </tr>
  </thead>
</table>

推荐答案

您可以利用以下代码在其中准备"rowCallback"函数中重复行的映射，并在数据表绘制成功后在applyDuplicateRowColor函数中为重复行应用颜色完成

You can make use of below code where you can prepare map of duplicate rows inside 'rowCallback' function and apply color to dupliate rows in applyDuplicateRowColor function once datatable draw get completed

我已经使用duplicateColor数组为相同的行选择随机颜色，您可以对其进行编辑并添加更多颜色.还使用duplicateColorIndex获取下一个重复数据的下一个重复颜色，请确保数组中有足够的颜色，否则它将显示arrayindexoutofbound错误.

I have used duplicateColor array to pick random color for same rows, you can edit it and add more colors. also using duplicateColorIndex to get next duplicate color for next duplicate data, please make sure you have enough color in the array otherwise it will show arrayindexoutofbound error.

$(document).ready(function() {
   var duplicateColor = ['red', 'blue', 'yellow', 'green'];
   var len = duplicateColor.length;
   var duplicateColorIndex = 0;
   var duplicateRowMap = {};
  
     $.fn.applyDuplicateRowColor = function() {
       $("#table1 tr").each(function(){
       var name = $(this).find('td:eq(0)').text();
       var value = duplicateRowMap[name];
       if(value!='x') {
         $(this).css('color', duplicateColor[value]);
       }
      });
      //reset variables
       duplicateColorIndex = 0;
       duplicateRowMap = {};
    };
  
   var data = [{
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$3,120"
    },
    {
      "name": "Black Winters",
      "position": "Project Engineer",
      "salary": "$1,300"
    },
    {
      "name": "Black Winters",
      "position": "Project Engineer",
      "salary": "$1,200"
    },
    {
      "name": "Oranges",
      "position": "Project Engineer",
      "salary": "$1,100"
    },
    {
      "name": "Oranges",
      "position": "Project Engineer",
      "salary": "$1,000"
    }
  ];
  $("#table1").DataTable({
    data: data,
    columns: [{
        data: 'name'
      },
      {
        data: 'position'
      },
      {
        data: 'salary'
      },
    ],
    "rowCallback": function( row, data ) {
     var name = duplicateRowMap[data.name];
     if(name) {
       if(name == 'X') {
         duplicateRowMap[data.name] = duplicateColorIndex;
         duplicateColorIndex++;
        if(duplicateColorIndex==len)
           duplicateColorIndex = 0;
       }
     } else {
       duplicateRowMap[data.name] = 'X';
     }
    },
    "fnDrawCallback": function( oSettings ) {
      $(this).applyDuplicateRowColor();
    }
  });
  //console.log(duplicateRowMap);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
  <thead>
    <tr>
      <th>name</th>
      <th>position</th>
      <th>salary</th>
    </tr>
  </thead>
</table>

这篇关于如何使用数据表以相同颜色显示重复的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！