CODEWITHSUNDEEP
javascriptjqueryhtmlajaxdatatables
Danish Adeel
Danish Adeel

Reputation: 730

Jquery Datatable filter duplicate rows

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

Upvotes: 0

Views: 12481

Answers (2)

davidkonrad
davidkonrad

Reputation: 85538

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/

Upvotes: 2

BobJiang
BobJiang

Reputation: 506

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

Upvotes: 0

Related Questions