Jquery Datatable filter duplicate rows

Question

$(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>

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

Please create a snippet instead of simple providing a fiddle link - you really should not expect users to leave SO to investigate — StudioTime
– StudioTime, Commented Jul 13, 2017 at 9:01

davidkonrad · Accepted Answer · 2017-07-13 10:51:52Z

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.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' }
  ]
})

demo -> http://jsfiddle.net/cbcqdj7h/

answered Jul 13, 2017 at 10:51

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Danish Adeel Over a year ago

Thanks I will implement then mark as an answer if its working on my environment.

Sid Kathirvel Over a year ago

This works! Although the results are filtered, the total records are still showing up as a higher number due to duplicates. How would you modify the result set total count?

davidkonrad Over a year ago

@KathirSidVel Are you using serverSide ...? See this -> stackoverflow.com/questions/52426357/… and follow the comments.

BobJiang · Accepted Answer · 2017-07-13 10:47:30Z

0

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.net/reference/option/ajax

answered Jul 13, 2017 at 10:47

BobJiang

5064 silver badges4 bronze badges

Collectives™ on Stack Overflow

Jquery Datatable filter duplicate rows

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related