Jquery Datatable过滤重复的行

时间:2017-07-13 08:59:51

标签: javascript jquery html ajax datatables

$(document).ready(function () {
  var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';

  var table = $('#example').DataTable({
    'processing': true,
    'serverSide': true,
    'paging': false,
    'bFilter': false,
    'ajax': {
      type: 'POST',
      'url': url,
      'data': function (d) {
        return JSON.stringify( d );
      }
    }
  });
  table.column( 3 ).data().unique();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
        </tr>
    </thead>
</table>

我正在尝试使用datatable unique function,但我无法执行它。实际上我想删除我使用动态ajax数据的重复数据。

table
    .column( 3 )
    .data()
    .unique();

就像在这个例子中我想过滤掉城市,请告诉我我做错了什么,还有其他任何方式,我无法在stackoverflow中找到任何其他答案或者可能无法理解。我使用的是版本1.10.9

2 个答案:

答案 0 :(得分:1)

注意unique的实际目的:

  

创建一个新的API实例,其中只包含来自的唯一项目   实例结果集中的元素。

唯一返回过滤的一组唯一项,它不会过滤表中显示的行。由于您要显示删除重复数据的行,我建议您过滤掉dataSrc回调中的重复项。您没有提供有关JSON的详细信息,但这里有一个“规范”JSON数据集的示例,其中过滤了重复的办公室。它只是在返回的Array.filter数组中使用javascripts data

var table = $('#example').DataTable({
  ajax: {
    url: 'https://api.myjson.com/bins/avxod',
    dataSrc: function(json) {
       var offices = [];
       return json.data.filter(function(item) {
         if (!~offices.indexOf(item.office)) {
           offices.push(item.office);
           return item;
         }
       })
    }
  },
  columns: [
    { data: 'name' },
    { data: 'position' },    
    { data: 'office' },        
    { data: 'salary' }
  ]
})  

演示 - &gt;的 http://jsfiddle.net/cbcqdj7h/

答案 1 :(得分:0)

执行unique只返回任何内容。

如果您只是想在获得真实数据后获得唯一数据。

var table = $('#example').DataTable({
    ...,
    drawCallback:function(){
        var a = table.column( 3 ).data().unique();
        console.log(a);
    }
})

如果您希望过滤数据没有相同的值。

var table = $('#example').DataTable({
    'processing': true,
    'serverSide': true,
    'paging': false,
    'bFilter': false,
    'ajax': {
      type: 'POST',
      'url': url,
      'data': function (d) {
        // TODO do some thing here to filter value
        return JSON.stringify( d );
      }
    }
  });

DataTable doc https://datatables.net/reference/option/ajax