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.

API Initialization
Add Rows
New rows can be added to a DataTable using the row.add() API method. Simply call the API function with the data for the new row
Column 1Column 2Column 3Column 4Column 5
1.11.21.31.41.5
Column 1Column 2Column 3Column 4Column 5
Showing 1 to 1 of 1 entries
Individual Column Searching (Text Inputs)
The searching functionality provided by DataTables is useful for quickly search through the information in the table - however the search is global, and you may wish to present controls that search on specific columns.
Individual Column Searching (Select Inputs)
This example is almost identical to text based individual column example and provides the same functionality, but in this case using select input controls.
Row Selection (Multiple Rows)
It can be useful to provide the user with the option to select rows in a DataTable. This can be done by using a click event to add / remove a class on the table rows.
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
Row Selection And Deletion (Single Row)
This example modifies the multiple row selection example by only allowing the selection of a single row. This is done by checking to see if the row already has a selected class, and if so removing it.
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
Form Inputs
In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the document (i.e. those rows / cells which are not needed are not inserted into the document).
NameAgePositionOffice
Airi Satou
Angelica Ramos
Ashton Cox
Bradley Greer
Brielle Williamson
Caesar Vance
Cedric Kelly
Charde Marshall
Colleen Hurst
Dai Rios
NameAgePositionOffice
Showing 1 to 10 of 26 entries
Show / Hide Columns Dynamically
This example shows how you can make use of the column().visible() API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it enabled with this API method, although it's not required for the API function to work.
NamePositionOfficeAgeStart dateSalary
Name
Position
Office
Age
Start date
Salary
Name
Position
Office
Age
Start date
Salary
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
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
NamePositionOfficeAgeStart dateSalary
Showing 1 to 30 of 30 entries
Search API (Regular Expressions)
Searching a table is one of the most common user interactions with a DataTables table, and DataTables provides a number of methods for you to control this interaction.
Target Search text Treat as regex Use smart search
Global search
Column - Name
Column - Position
Column - Office
Column - Age
Column - Start date
Column - Salary
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
// [ Add Rows ] var t = $('#add-row-table').DataTable(); var counter = 1; $('#addRow').on('click', function () { t.row.add([ counter + '.1', counter + '.2', counter + '.3', counter + '.4', counter + '.5' ]).draw(false); counter++; }); $('#addRow').click(); // [ Individual Column Searching (Text Inputs) ] $('#footer-search tfoot th').each(function () { var title = $(this).text(); $(this).html(''); }); var table = $('#footer-search').DataTable(); // [ Apply the search ] table.columns().every(function () { var that = this; $('input', this.footer()).on('keyup change', function () { if (that.search() !== this.value) { that .search(this.value) .draw(); } }); }); // [ Individual Column Searching (Select Inputs) ] $('#footer-select').DataTable({ initComplete: function () { this.api().columns().every(function () { var column = this; var select = $('') .appendTo($(column.footer()).empty()) .on('change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search(val ? '^' + val + '$' : '', true, false) .draw(); }); column.data().unique().sort().each(function (d, j) { select.append('') }); }); } }); var srow = $('#row-select').DataTable(); $('#row-select tbody').on('click', 'tr', function () { $(this).toggleClass('selected'); }); var drow = $('#row-delete').DataTable(); $('#row-delete tbody').on('click', 'tr', function () { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); } else { drow.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); $('#row-delete-btn').on('click', function () { drow.row('.selected').remove().draw(!1); }); function format(d) { return '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
Full name:' + d.name + '
Extension number:' + d.extn + '
Extra info:And any further details here (images etc)...
'; } // [ Form input ] var table = $('#form-input-table').DataTable(); $('#form-input-btn').on('click', function () { var data = table.$('input, select').serialize(); alert( "The following data would have been submitted to the server: \n\n" + data.substr(0, 120) + '...' ); return false; }); // [ Show-hide table js ] var sh = $('#show-hide-table').DataTable({ "scrollY": "200px", "paging": false }); $('a.toggle-vis').on('click', function (e) { e.preventDefault(); // Get the column API object var column = sh.column($(this).attr('data-column')); // Toggle the visibility column.visible(!column.visible()); }); // [ Search API ] function filterGlobal() { $('#search-api').DataTable().search( $('#global_filter').val(), $('#global_regex').prop('checked'), $('#global_smart').prop('checked') ).draw(); } function filterColumn(i) { $('#search-api').DataTable().column(i).search( $('#col' + i + '_filter').val(), $('#col' + i + '_regex').prop('checked'), $('#col' + i + '_smart').prop('checked') ).draw(); } $('#search-api').DataTable(); $('input.global_filter').on('keyup click', function () { filterGlobal(); }); $('input.column_filter').on('keyup click', function () { filterColumn($(this).parents('tr').attr('data-column')); });