如何使用数据表以相同的颜色显示重复的行 [英] 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屋！