最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Jquery Datatable filter duplicate rows - Stack Overflow

programmeradmin1浏览0评论

$(document).ready(function () {
  var url = '';

  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=".1.1/jquery.min.js"></script>
<link href=".10.9/css/jquery.dataTables.css" rel="stylesheet"/>
<script src=".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>

$(document).ready(function () {
  var url = 'http://www.json-generator./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.datatables/1.10.9/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="http://cdn.datatables/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>

I am trying to use datatable unique function but I am unable to execute it. Actually I want to remove the duplicate data I am using dynamic ajax data.

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

Like in this example I want to filter out the cities, Kindly suggest me what I am doing wrong and is there any other way, I couldnt found any other answers in stackoverflow or may be unable to understand. I am using version 1.10.9

Share Improve this question edited Jul 13, 2017 at 12:21 Danish Adeel asked Jul 13, 2017 at 8:59 Danish AdeelDanish Adeel 7304 gold badges11 silver badges27 bronze badges 4
  • Please create a snippet instead of simple providing a fiddle link - you really should not expect users to leave SO to investigate – StudioTime Commented Jul 13, 2017 at 9:01
  • @DarrenSweeney Added – Danish Adeel Commented Jul 13, 2017 at 9:05
  • Do you see any errors in console? – Kumar_Vikas Commented Jul 13, 2017 at 9:10
  • @Kumar_Vikas nO ERORR – Danish Adeel Commented Jul 13, 2017 at 9:50
Add a ment  | 

2 Answers 2

Reset to default 2

Take notice of the actual purpose of unique :

Create a new API instance containing only the unique items from a the elements in an instance's result set.

Unique returns a filtered set of unique items, it does not filter the rows shown in the table. Since you want to show rows where duplicated data is removed I will suggest you filter out the duplicates in the dataSrc callback. You do not provide details about the JSON, but here is an example with one of the "canonical" JSON datasets, where duplicated offices is filtered out. It simply uses javascripts Array.filter on the returned data array :

var table = $('#example').DataTable({
  ajax: {
    url: 'https://api.myjson./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' }
  ]
})  

demo -> http://jsfiddle/cbcqdj7h/

Execute unique there just return nothing.

If you just want get a unique data after you get real data.

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

If you want filter data without the same value.

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 );
      }
    }
  });

And DataTable doc https://datatables/reference/option/ajax

发布评论

评论列表(0)

  1. 暂无评论