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

• javascript
• jquery
• html
• ajax
• datatables

Share Improve this question Follow edited Jul 13, 2017 at 12:21 Danish Adeel asked Jul 13, 2017 at 8:59 Danish AdeelDanish Adeel 73044 gold badges1111 silver badges2727 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

Sorted by: 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