Datta Able
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Josephin Doe
Generic placeholder image

hello Datta! Will you tell me something

about yourself?

8:20 a.m.

Ohh! very nice

8:22 a.m.

Generic placeholder image

can you help me?

8:20 a.m.

Plugin Initialization
API Plug-in Methods
The DataTables API is designed to be fully extensible, with custom functions being very easy to add using the $.fn.dataTable.Api.register function. This function takes two arguments
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Ordering Plug-ins (with type detection)
Although DataTables will automatically order data from a number of different data types using the built in methods, when dealing with more complex formatted data
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Custom Filtering - Range Search
There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range searches (in between two numbers) and date range searches
Minimum age:
Maximum age:
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Live DOM Ordering
This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during its initialisation phase
NameAgePositionOffice
Airi Satou
Angelica Ramos
Ashton Cox
Bradley Greer
Brenden Wagner
Brielle Williamson
Caesar Vance
Cedric Kelly
Charde Marshall
Colleen Hurst
NameAgePositionOffice
Showing 1 to 10 of 31 entries
// [ Plugin data table ] $.fn.dataTable.Api.register('column().data().sum()', function () { return this.reduce(function (a, b) { var x = parseFloat(a) || 0; var y = parseFloat(b) || 0; return x + y; }); }); var table = $('#dt-plugin-method').DataTable(); $('') .prependTo('.dt-plugin-buttons') .on('click', function () { alert('Column sum is: ' + table.column(3).data().sum()); }); $('') .prependTo('.dt-plugin-buttons') .on('click', function () { alert('Column sum is: ' + table.column(3, { page: 'current' }).data().sum()); }); $.fn.dataTable.ext.type.detect.unshift( function (d) { return d === 'Low' || d === 'Medium' || d === 'High' ? 'salary-grade' : null; } ); $.fn.dataTable.ext.type.order['salary-grade-pre'] = function (d) { switch (d) { case 'Low': return 1; case 'Medium': return 2; case 'High': return 3; } return 0; }; $('#dt-ordering').DataTable(); /* Custom filtering function which will search data in column four between two values */ $.fn.dataTable.ext.search.push( function (settings, data, dataIndex) { var min = parseInt($('#min').val(), 10); var max = parseInt($('#max').val(), 10); var age = parseFloat(data[3]) || 0; // use data for the age column if ((isNaN(min) && isNaN(max)) || (isNaN(min) && age <= max) || (min <= age && isNaN(max)) || (min <= age && age <= max)) { return true; } return false; } ); var dtage = $('#dt-range').DataTable(); /* Event listener to the two range filtering inputs to redraw on input */ $('#min, #max').keyup(function () { dtage.draw(); }); /* Create an array with the values of all the input boxes in a column */ $.fn.dataTable.ext.order['dom-text'] = function (settings, col) { return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) { return $('input', td).val(); }); } /* Create an array with the values of all the input boxes in a column, parsed as numbers */ $.fn.dataTable.ext.order['dom-text-numeric'] = function (settings, col) { return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) { return $('input', td).val() * 1; }); } /* Create an array with the values of all the select options in a column */ $.fn.dataTable.ext.order['dom-select'] = function (settings, col) { return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) { return $('select', td).val(); }); } /* Create an array with the values of all the checkboxes in a column */ $.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) { return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) { return $('input', td).prop('checked') ? '1' : '0'; }); } /* Initialise the table with the required column ordering data types */ $(document).ready(function () { $('#dt-live-dom').DataTable({ "columns": [ null, { "orderDataType": "dom-text-numeric" }, { "orderDataType": "dom-text", type: 'string' }, { "orderDataType": "dom-select" } ] }); });