DataTables is a plug-in for the jQuery Javascript library.
DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction.
Seq. | Name | Position | Office | Start date | Salary |
---|---|---|---|---|---|
2 | Tiger Nixon | System Architect | Edinburgh | 2011/04/25 | $320,800 |
22 | Garrett Winters | Accountant | Tokyo | 2011/07/25 | $170,750 |
6 | Ashton Cox | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 |
41 | Cedric Kelly | Senior Javascript Developer | Edinburgh | 2012/03/29 | $433,060 |
55 | Airi Satou | Accountant | Tokyo | 2008/11/28 | $162,700 |
21 | Brielle Williamson | Integration Specialist | New York | 2012/12/02 | $372,000 |
46 | Herrod Chandler | Sales Assistant | San Francisco | 2012/08/06 | $137,500 |
50 | Rhona Davidson | Integration Specialist | Tokyo | 2010/10/14 | $327,900 |
26 | Colleen Hurst | Javascript Developer | San Francisco | 2009/09/15 | $205,500 |
18 | Sonya Frost | Software Engineer | Edinburgh | 2008/12/13 | $103,600 |
13 | Jena Gaines | Office Manager | London | 2008/12/19 | $90,560 |
23 | Quinn Flynn | Support Lead | Edinburgh | 2013/03/03 | $342,000 |
14 | Charde Marshall | Regional Director | San Francisco | 2008/10/16 | $470,600 |
12 | Haley Kennedy | Senior Marketing Designer | London | 2012/12/18 | $313,500 |
54 | Tatyana Fitzpatrick | Regional Director | London | 2010/03/17 | $385,750 |
37 | Michael Silva | Marketing Designer | London | 2012/11/27 | $198,500 |
32 | Paul Byrd | Chief Financial Officer (CFO) | New York | 2010/06/09 | $725,000 |
35 | Gloria Little | Systems Administrator | New York | 2009/04/10 | $237,500 |
48 | Bradley Greer | Software Engineer | London | 2012/10/13 | $132,000 |
45 | Dai Rios | Personnel Lead | Edinburgh | 2012/09/26 | $217,500 |
17 | Jenette Caldwell | Development Lead | New York | 2011/09/03 | $345,000 |
57 | Yuri Berry | Chief Marketing Officer (CMO) | New York | 2009/06/25 | $675,000 |
29 | Caesar Vance | Pre-Sales Support | New York | 2011/12/12 | $106,450 |
56 | Doris Wilder | Sales Assistant | Sydney | 2010/09/20 | $85,600 |
36 | Angelica Ramos | Chief Executive Officer (CEO) | London | 2009/10/09 | $1,200,000 |
5 | Gavin Joyce | Developer | Edinburgh | 2010/12/22 | $92,575 |
51 | Jennifer Chang | Regional Director | Singapore | 2010/11/14 | $357,650 |
20 | Brenden Wagner | Software Engineer | San Francisco | 2011/06/07 | $206,850 |
7 | Fiona Green | Chief Operating Officer (COO) | San Francisco | 2010/03/11 | $850,000 |
1 | Shou Itou | Regional Marketing | Tokyo | 2011/08/14 | $163,000 |
39 | Michelle House | Integration Specialist | Sydney | 2011/06/02 | $95,400 |
40 | Suki Burks | Developer | London | 2009/10/22 | $114,500 |
47 | Prescott Bartlett | Technical Author | London | 2011/05/07 | $145,000 |
52 | Gavin Cortez | Team Leader | San Francisco | 2008/10/26 | $235,500 |
8 | Martena Mccray | Post-Sales support | Edinburgh | 2011/03/09 | $324,050 |
24 | Unity Butler | Marketing Designer | San Francisco | 2009/12/09 | $85,675 |
38 | Howard Hatfield | Office Manager | San Francisco | 2008/12/16 | $164,500 |
53 | Hope Fuentes | Secretary | San Francisco | 2010/02/12 | $109,850 |
30 | Vivian Harrell | Financial Controller | San Francisco | 2009/02/14 | $452,500 |
28 | Timothy Mooney | Office Manager | London | 2008/12/11 | $136,200 |
34 | Jackson Bradshaw | Director | New York | 2008/09/26 | $645,750 |
4 | Olivia Liang | Support Engineer | Singapore | 2011/02/03 | $234,500 |
3 | Bruno Nash | Software Engineer | London | 2011/05/03 | $163,500 |
31 | Sakura Yamamoto | Support Engineer | Tokyo | 2009/08/19 | $139,575 |
11 | Thor Walton | Developer | New York | 2013/08/11 | $98,540 |
10 | Finn Camacho | Support Engineer | San Francisco | 2009/07/07 | $87,500 |
44 | Serge Baldwin | Data Coordinator | Singapore | 2012/04/09 | $138,575 |
42 | Zenaida Frank | Software Engineer | New York | 2010/01/04 | $125,250 |
27 | Zorita Serrano | Software Engineer | San Francisco | 2012/06/01 | $115,000 |
49 | Jennifer Acosta | Junior Javascript Developer | Edinburgh | 2013/02/01 | $75,650 |
15 | Cara Stevens | Sales Assistant | New York | 2011/12/06 | $145,600 |
9 | Hermione Butler | Regional Director | London | 2011/03/21 | $356,250 |
25 | Lael Greer | Systems Administrator | London | 2009/02/27 | $103,500 |
33 | Jonas Alexander | Developer | San Francisco | 2010/07/14 | $86,500 |
43 | Shad Decker | Regional Director | Edinburgh | 2008/11/13 | $183,000 |
16 | Michael Bruce | Javascript Developer | Singapore | 2011/06/27 | $183,000 |
19 | Donna Snider | Customer Support | New York | 2011/01/25 | $112,000 |
<table id="datable_1" class="table nowrap">
<thead>
<tr>
<th>Seq.</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
...
<tr>
<td>19</td>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<!-- Data Table JS -->
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="vendors/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="vendors/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<script src="vendors/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>
$('#datable_1').DataTable( {
scrollX: true,
autoWidth: false,
language: { search: "",
searchPlaceholder: "Search",
sLengthMenu: "_MENU_items",
paginate: {
next: '', // or '→'
previous: '' // or '←'
}
},
"drawCallback": function () {
$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
}
});
You can add table classes like .table, .table-hover, .table-striped
or .thead-light, .thead-dark
to make data table looks like bootstrap.
Seq. | Name | Position | Office | Start date | Salary |
---|---|---|---|---|---|
2 | Tiger Nixon | System Architect | Edinburgh | 2011/04/25 | $320,800 |
22 | Garrett Winters | Accountant | Tokyo | 2011/07/25 | $170,750 |
6 | Ashton Cox | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 |
41 | Cedric Kelly | Senior Javascript Developer | Edinburgh | 2012/03/29 | $433,060 |
55 | Airi Satou | Accountant | Tokyo | 2008/11/28 | $162,700 |
21 | Brielle Williamson | Integration Specialist | New York | 2012/12/02 | $372,000 |
46 | Herrod Chandler | Sales Assistant | San Francisco | 2012/08/06 | $137,500 |
50 | Rhona Davidson | Integration Specialist | Tokyo | 2010/10/14 | $327,900 |
26 | Colleen Hurst | Javascript Developer | San Francisco | 2009/09/15 | $205,500 |
18 | Sonya Frost | Software Engineer | Edinburgh | 2008/12/13 | $103,600 |
13 | Jena Gaines | Office Manager | London | 2008/12/19 | $90,560 |
23 | Quinn Flynn | Support Lead | Edinburgh | 2013/03/03 | $342,000 |
14 | Charde Marshall | Regional Director | San Francisco | 2008/10/16 | $470,600 |
12 | Haley Kennedy | Senior Marketing Designer | London | 2012/12/18 | $313,500 |
54 | Tatyana Fitzpatrick | Regional Director | London | 2010/03/17 | $385,750 |
37 | Michael Silva | Marketing Designer | London | 2012/11/27 | $198,500 |
32 | Paul Byrd | Chief Financial Officer (CFO) | New York | 2010/06/09 | $725,000 |
35 | Gloria Little | Systems Administrator | New York | 2009/04/10 | $237,500 |
48 | Bradley Greer | Software Engineer | London | 2012/10/13 | $132,000 |
45 | Dai Rios | Personnel Lead | Edinburgh | 2012/09/26 | $217,500 |
17 | Jenette Caldwell | Development Lead | New York | 2011/09/03 | $345,000 |
57 | Yuri Berry | Chief Marketing Officer (CMO) | New York | 2009/06/25 | $675,000 |
29 | Caesar Vance | Pre-Sales Support | New York | 2011/12/12 | $106,450 |
56 | Doris Wilder | Sales Assistant | Sydney | 2010/09/20 | $85,600 |
36 | Angelica Ramos | Chief Executive Officer (CEO) | London | 2009/10/09 | $1,200,000 |
5 | Gavin Joyce | Developer | Edinburgh | 2010/12/22 | $92,575 |
51 | Jennifer Chang | Regional Director | Singapore | 2010/11/14 | $357,650 |
20 | Brenden Wagner | Software Engineer | San Francisco | 2011/06/07 | $206,850 |
7 | Fiona Green | Chief Operating Officer (COO) | San Francisco | 2010/03/11 | $850,000 |
1 | Shou Itou | Regional Marketing | Tokyo | 2011/08/14 | $163,000 |
39 | Michelle House | Integration Specialist | Sydney | 2011/06/02 | $95,400 |
40 | Suki Burks | Developer | London | 2009/10/22 | $114,500 |
47 | Prescott Bartlett | Technical Author | London | 2011/05/07 | $145,000 |
52 | Gavin Cortez | Team Leader | San Francisco | 2008/10/26 | $235,500 |
8 | Martena Mccray | Post-Sales support | Edinburgh | 2011/03/09 | $324,050 |
24 | Unity Butler | Marketing Designer | San Francisco | 2009/12/09 | $85,675 |
38 | Howard Hatfield | Office Manager | San Francisco | 2008/12/16 | $164,500 |
53 | Hope Fuentes | Secretary | San Francisco | 2010/02/12 | $109,850 |
30 | Vivian Harrell | Financial Controller | San Francisco | 2009/02/14 | $452,500 |
28 | Timothy Mooney | Office Manager | London | 2008/12/11 | $136,200 |
34 | Jackson Bradshaw | Director | New York | 2008/09/26 | $645,750 |
4 | Olivia Liang | Support Engineer | Singapore | 2011/02/03 | $234,500 |
3 | Bruno Nash | Software Engineer | London | 2011/05/03 | $163,500 |
31 | Sakura Yamamoto | Support Engineer | Tokyo | 2009/08/19 | $139,575 |
11 | Thor Walton | Developer | New York | 2013/08/11 | $98,540 |
10 | Finn Camacho | Support Engineer | San Francisco | 2009/07/07 | $87,500 |
44 | Serge Baldwin | Data Coordinator | Singapore | 2012/04/09 | $138,575 |
42 | Zenaida Frank | Software Engineer | New York | 2010/01/04 | $125,250 |
27 | Zorita Serrano | Software Engineer | San Francisco | 2012/06/01 | $115,000 |
49 | Jennifer Acosta | Junior Javascript Developer | Edinburgh | 2013/02/01 | $75,650 |
15 | Cara Stevens | Sales Assistant | New York | 2011/12/06 | $145,600 |
9 | Hermione Butler | Regional Director | London | 2011/03/21 | $356,250 |
25 | Lael Greer | Systems Administrator | London | 2009/02/27 | $103,500 |
33 | Jonas Alexander | Developer | San Francisco | 2010/07/14 | $86,500 |
43 | Shad Decker | Regional Director | Edinburgh | 2008/11/13 | $183,000 |
16 | Michael Bruce | Javascript Developer | Singapore | 2011/06/27 | $183,000 |
19 | Donna Snider | Customer Support | New York | 2011/01/25 | $112,000 |
<table id="datable_2" class="table nowrap">
<thead>
<tr>
<th>Seq.</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
...
<tr>
<td>19</td>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
$('#datable_2').DataTable( {
scrollY: "400px",
scrollX: true,
language: { search: "",
searchPlaceholder: "Search",
paginate: {
next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
previous: '<i class="ri-arrow-left-s-line"></i>' // or '←'
}
},
"drawCallback": function () {
$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
}
});
In order to be able to start a row drag and drop reorder, the user needs to be able to click and drag an element in the row.
Seq. | Name | Position | Office | Start date | Salary |
---|---|---|---|---|---|
1 | Tiger Nixon | System Architect | Edinburgh | 2011/04/25 | $320,800 |
2 | Garrett Winters | Accountant | Tokyo | 2011/07/25 | $170,750 |
3 | Ashton Cox | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 |
4 | Cedric Kelly | Senior Javascript Developer | Edinburgh | 2012/03/29 | $433,060 |
5 | Airi Satou | Accountant | Tokyo | 2008/11/28 | $162,700 |
6 | Brielle Williamson | Integration Specialist | New York | 2012/12/02 | $372,000 |
7 | Herrod Chandler | Sales Assistant | San Francisco | 2012/08/06 | $137,500 |
8 | Rhona Davidson | Integration Specialist | Tokyo | 2010/10/14 | $327,900 |
<table id="datable_3" class="table nowrap">
<thead>
<tr>
<th>Seq.</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>2</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...
<tr>
<td>8</td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
</tbody>
</table>
$('#datable_3').DataTable( {
rowReorder: true,
scrollX:true,
//scrollX:true,
autoWidth: false,
"order": [[ 1, "asc" ]],
columnDefs: [
{ orderable: true, className: 'reorder', targets: 0 }
],
language: { search: "",
searchPlaceholder: "Search",
sLengthMenu: "_MENU_items",
paginate: {
next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
previous: '<i class="ri-arrow-left-s-line"></i>' // or '←'
}
},
"drawCallback": function () {
$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
}
});
Use buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
to add export table options.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
Adwez Nash | Software Engineer | India | 38 | 2014/05/03 | $763,500 |
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
<table id="datable_31" class="table nowrap table-striped">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Adwez Nash</td>
<td>Software Engineer</td>
<td>India</td>
<td>38</td>
<td>2014/05/03</td>
<td>$763,500</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
</tbody>
</table>
$('#datable_31').DataTable( {
scrollX: true,
autoWidth: false,
dom: 'Bfrtip',
language: { search: "",
searchPlaceholder: "Search",
sLengthMenu: "_MENU_items",
paginate: {
next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
previous: '<i class="ri-arrow-left-s-line"></i>' // or '←'
}
},
"info": false,
"bFilter": false,
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"drawCallback": function () {
$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
}
} );
$('#datable_31_wrapper .dt-buttons > .btn').addClass('btn-outline-light btn-sm');
Add advanced interaction controls to HTML tables like search, pagination & selectors
. For responsive table just add the responsive: true
to your DataTables function. View all options.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
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 |
Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 |
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 |
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 |
Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 |
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 |
Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
Michelle House | Integration Specialist | Sidney | 37 | 2011/06/02 | $95,400 |
Suki Burks | Developer | London | 53 | 2009/10/22 | $114,500 |
Prescott Bartlett | Technical Author | London | 27 | 2011/05/07 | $145,000 |
Gavin Cortez | Team Leader | San Francisco | 22 | 2008/10/26 | $235,500 |
Martena Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | $324,050 |
Unity Butler | Marketing Designer | San Francisco | 47 | 2009/12/09 | $85,675 |
Howard Hatfield | Office Manager | San Francisco | 51 | 2008/12/16 | $164,500 |
Hope Fuentes | Secretary | San Francisco | 41 | 2010/02/12 | $109,850 |
Vivian Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | $452,500 |
Timothy Mooney | Office Manager | London | 37 | 2008/12/11 | $136,200 |
Jackson Bradshaw | Director | New York | 65 | 2008/09/26 | $645,750 |
Olivia Liang | Support Engineer | Singapore | 64 | 2011/02/03 | $234,500 |
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
Sakura Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575 |
Thor Walton | Developer | New York | 61 | 2013/08/11 | $98,540 |
Finn Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | $87,500 |
Serge Baldwin | Data Coordinator | Singapore | 64 | 2012/04/09 | $138,575 |
Zenaida Frank | Software Engineer | New York | 63 | 2010/01/04 | $125,250 |
Zorita Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $115,000 |
Jennifer Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013/02/01 | $75,650 |
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Hermione Butler | Regional Director | London | 47 | 2011/03/21 | $356,250 |
Lael Greer | Systems Administrator | London | 21 | 2009/02/27 | $103,500 |
Jonas Alexander | Developer | San Francisco | 30 | 2010/07/14 | $86,500 |
Shad Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 |
Michael Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 |
Donna Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 |
<table id="datable_4" class="table nowrap">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
var targetElem = $('#datable_4');
var targetDt =targetElem.DataTable({
scrollX: true,
autoWidth: false,
language: { search: "",
searchPlaceholder: "Search",
sLengthMenu: "_MENU_items",
paginate: {
next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
previous: '<i class="ri-arrow-left-s-line"></i>' // or '←'
}
},
select: {
style: 'multi'
},
"drawCallback": function () {
$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
}
});
$(document).on( 'click', '.del-button', function () {
targetDt.rows('.selected').remove().draw( false );
});
$('').insertAfter(targetElem.closest('#datable_4_wrapper').find('.dataTables_length label'));
Add advanced interaction controls to HTML tables like search, pagination & selectors
. For responsive table just add the responsive: true
to your DataTables function. View all options.
Name | Position | Office | Age | Start date | Salary | |
---|---|---|---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | |
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | |
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | |
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | |
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 | |
Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 | |
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 | |
Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 | |
Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 | |
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 | |
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 | |
Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
<table id="datable_4c" class="table nowrap">
<thead>
<tr>
<th><span class="fs-6">
<input type="checkbox" class="form-check-input form-check-theme check-select-all" id="customCheck1">
</span></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
</tbody>
</table>
/*MultiRow Select Checkbox*/
/*Checkbox Add*/
var tdCnt=0;
$(' table#datable_4c tbody tr').each(function(){
$('<td><span class="form-check"><input type="checkbox" class="form-check-input" id="chk_sel_'+tdCnt+'"><label class="form-check-label" for="chk_sel_'+tdCnt+'"></label></span></td>').prependTo($(this));
tdCnt++;
});
/*DataTable Init*/
var targetDt1 = $('#datable_4c').DataTable({
scrollX: true,
autoWidth: false,
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": 0
} ],
"order": [[ 1, 'asc' ]],
language: { search: "",
searchPlaceholder: "Search",
sLengthMenu: "_MENU_items",
paginate: {
next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
previous: '<i class="ri-arrow-left-s-line"></i>' // or '←'
}
},
"drawCallback": function () {
$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
}
});
Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the DataTables core), it is most certainly possible to give the look and feel of row grouping.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
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 |
Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 |
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
Doris Wilder | Sales Assistant | Sydney | 23 | 2010/09/20 | $85,600 |
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 |
Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 |
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 |
Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
Michelle House | Integration Specialist | Sydney | 37 | 2011/06/02 | $95,400 |
Suki Burks | Developer | London | 53 | 2009/10/22 | $114,500 |
Prescott Bartlett | Technical Author | London | 27 | 2011/05/07 | $145,000 |
Gavin Cortez | Team Leader | San Francisco | 22 | 2008/10/26 | $235,500 |
Martena Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | $324,050 |
Unity Butler | Marketing Designer | San Francisco | 47 | 2009/12/09 | $85,675 |
Howard Hatfield | Office Manager | San Francisco | 51 | 2008/12/16 | $164,500 |
Hope Fuentes | Secretary | San Francisco | 41 | 2010/02/12 | $109,850 |
Vivian Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | $452,500 |
Timothy Mooney | Office Manager | London | 37 | 2008/12/11 | $136,200 |
Jackson Bradshaw | Director | New York | 65 | 2008/09/26 | $645,750 |
Olivia Liang | Support Engineer | Singapore | 64 | 2011/02/03 | $234,500 |
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
Sakura Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575 |
Thor Walton | Developer | New York | 61 | 2013/08/11 | $98,540 |
Finn Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | $87,500 |
Serge Baldwin | Data Coordinator | Singapore | 64 | 2012/04/09 | $138,575 |
Zenaida Frank | Software Engineer | New York | 63 | 2010/01/04 | $125,250 |
Zorita Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $115,000 |
Jennifer Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013/02/01 | $75,650 |
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Hermione Butler | Regional Director | London | 47 | 2011/03/21 | $356,250 |
Lael Greer | Systems Administrator | London | 21 | 2009/02/27 | $103,500 |
Jonas Alexander | Developer | San Francisco | 30 | 2010/07/14 | $86,500 |
Shad Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 |
Michael Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 |
Donna Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 |
<table id="datable_6" class="table nowrap">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
/*Row Grouping*/
var groupColumn = 2;
var table_grp = $('#datable_6').DataTable({
"columnDefs": [
{ "visible": false, "targets": groupColumn }
],
scrollX: true,
autoWidth: false,
language: { search: "",
searchPlaceholder: "Search",
sLengthMenu: "_MENU_items",
paginate: {
next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
previous: '<i class="ri-arrow-left-s-line"></i>' // or '←'
}
},
"order": [[ groupColumn, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
);
last = group;
}
} );
$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
}
} );
// Order by the grouping
$('#datable_6 tbody').on( 'click', 'tr.group', function () {
var currentOrder = table_grp.order()[0];
if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
table_grp.order( [ groupColumn, 'desc' ] ).draw();
}
else {
table_grp.order( [ groupColumn, 'asc' ] ).draw();
}
});
Through the use of the header and footer callback manipulation functions provided by DataTables (headerCallback and footerCallback)
First name | Last name | Position | Office | Salary |
---|---|---|---|---|
Tiger | Nixon | System Architect | Edinburgh | $320,800 |
Garrett | Winters | Accountant | Tokyo | $170,750 |
Ashton | Cox | Junior Technical Author | San Francisco | $86,000 |
Cedric | Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
Airi | Satou | Accountant | Tokyo | $162,700 |
Brielle | Williamson | Integration Specialist | New York | $372,000 |
Herrod | Chandler | Sales Assistant | San Francisco | $137,500 |
Rhona | Davidson | Integration Specialist | Tokyo | $327,900 |
Colleen | Hurst | Javascript Developer | San Francisco | $205,500 |
Sonya | Frost | Software Engineer | Edinburgh | $103,600 |
Jena | Gaines | Office Manager | London | $90,560 |
Quinn | Flynn | Support Lead | Edinburgh | $342,000 |
Charde | Marshall | Regional Director | San Francisco | $470,600 |
Haley | Kennedy | Senior Marketing Designer | London | $313,500 |
Tatyana | Fitzpatrick | Regional Director | London | $385,750 |
Michael | Silva | Marketing Designer | London | $198,500 |
Paul | Byrd | Chief Financial Officer (CFO) | New York | $725,000 |
Gloria | Little | Systems Administrator | New York | $237,500 |
Bradley | Greer | Software Engineer | London | $132,000 |
Dai | Rios | Personnel Lead | Edinburgh | $217,500 |
Jenette | Caldwell | Development Lead | New York | $345,000 |
Yuri | Berry | Chief Marketing Officer (CMO) | New York | $675,000 |
Caesar | Vance | Pre-Sales Support | New York | $106,450 |
Doris | Wilder | Sales Assistant | Sydney | $85,600 |
Angelica | Ramos | Chief Executive Officer (CEO) | London | $1,200,000 |
Gavin | Joyce | Developer | Edinburgh | $92,575 |
Jennifer | Chang | Regional Director | Singapore | $357,650 |
Brenden | Wagner | Software Engineer | San Francisco | $206,850 |
Fiona | Green | Chief Operating Officer (COO) | San Francisco | $850,000 |
Shou | Itou | Regional Marketing | Tokyo | $163,000 |
Michelle | House | Integration Specialist | Sydney | $95,400 |
Suki | Burks | Developer | London | $114,500 |
Prescott | Bartlett | Technical Author | London | $145,000 |
Gavin | Cortez | Team Leader | San Francisco | $235,500 |
Martena | Mccray | Post-Sales support | Edinburgh | $324,050 |
Unity | Butler | Marketing Designer | San Francisco | $85,675 |
Howard | Hatfield | Office Manager | San Francisco | $164,500 |
Hope | Fuentes | Secretary | San Francisco | $109,850 |
Vivian | Harrell | Financial Controller | San Francisco | $452,500 |
Timothy | Mooney | Office Manager | London | $136,200 |
Jackson | Bradshaw | Director | New York | $645,750 |
Olivia | Liang | Support Engineer | Singapore | $234,500 |
Bruno | Nash | Software Engineer | London | $163,500 |
Sakura | Yamamoto | Support Engineer | Tokyo | $139,575 |
Thor | Walton | Developer | New York | $98,540 |
Finn | Camacho | Support Engineer | San Francisco | $87,500 |
Serge | Baldwin | Data Coordinator | Singapore | $138,575 |
Zenaida | Frank | Software Engineer | New York | $125,250 |
Zorita | Serrano | Software Engineer | San Francisco | $115,000 |
Jennifer | Acosta | Junior Javascript Developer | Edinburgh | $75,650 |
Cara | Stevens | Sales Assistant | New York | $145,600 |
Hermione | Butler | Regional Director | London | $356,250 |
Lael | Greer | Systems Administrator | London | $103,500 |
Jonas | Alexander | Developer | San Francisco | $86,500 |
Shad | Decker | Regional Director | Edinburgh | $183,000 |
Michael | Bruce | Javascript Developer | Singapore | $183,000 |
Donna | Snider | Customer Support | New York | $112,000 |
Total: |
<table id="datable_7" class="table nowrap">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>$170,750</td>
</tr>
...
<tr>
<td>Donna</td>
<td>Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4" style="text-align:right">Total:</th>
<th></th>
</tr>
</tfoot>
</table>
$('#datable_7').DataTable( {
scrollX: true,
autoWidth: false,
language: { search: "",
searchPlaceholder: "Search",
sLengthMenu: "_MENU_item",
paginate: {
next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
previous: '<i class="ri-arrow-left-s-line"></i>' // or '←'
}
},
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
var total = api
.column( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
var pageTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 4 ).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total)'
);
},
"drawCallback": function () {
$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
}
});
If you wish to add only a single row at a time, this method's singular counterpart, row.add()
can be used.
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
---|---|---|---|---|
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
<table id="datable_10" class="table nowrap">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</tfoot>
</table>
/*Add New Row*/
var targetElem_1 = $('#datable_10');
var targetDt2 = $('#datable_10').DataTable({
scrollX: true,
autoWidth: false,
language: { search: "",
searchPlaceholder: "Search",
sLengthMenu: "_MENU_items",
paginate: {
next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
previous: '<i class="ri-arrow-left-s-line"></i>' // or '←'
}
},
"drawCallback": function () {
$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
}
});
var counter = 1;
$('').insertAfter(targetElem_1.closest('#datable_10_wrapper').find('.dataTables_length label'));
$('#add_row').on( 'click', function () {
targetDt2.row.add( [
counter +'.1',
counter +'.2',
counter +'.3',
counter +'.4',
counter +'.5'
] ).draw( false );
counter++;
});
// Automatically add a first row of data
$('#add_row').trigger('click');
This example is almost identical to text based individual column example and provides the same functionality, but in this case using select input controls.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Name | Position | Office | Age | Start date | Salary |
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
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 |
Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 |
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
Doris Wilder | Sales Assistant | Sydney | 23 | 2010/09/20 | $85,600 |
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 |
Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 |
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 |
Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
Michelle House | Integration Specialist | Sydney | 37 | 2011/06/02 | $95,400 |
Suki Burks | Developer | London | 53 | 2009/10/22 | $114,500 |
Prescott Bartlett | Technical Author | London | 27 | 2011/05/07 | $145,000 |
Gavin Cortez | Team Leader | San Francisco | 22 | 2008/10/26 | $235,500 |
Martena Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | $324,050 |
Unity Butler | Marketing Designer | San Francisco | 47 | 2009/12/09 | $85,675 |
Howard Hatfield | Office Manager | San Francisco | 51 | 2008/12/16 | $164,500 |
Hope Fuentes | Secretary | San Francisco | 41 | 2010/02/12 | $109,850 |
Vivian Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | $452,500 |
Timothy Mooney | Office Manager | London | 37 | 2008/12/11 | $136,200 |
Jackson Bradshaw | Director | New York | 65 | 2008/09/26 | $645,750 |
Olivia Liang | Support Engineer | Singapore | 64 | 2011/02/03 | $234,500 |
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
Sakura Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575 |
Thor Walton | Developer | New York | 61 | 2013/08/11 | $98,540 |
Finn Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | $87,500 |
Serge Baldwin | Data Coordinator | Singapore | 64 | 2012/04/09 | $138,575 |
Zenaida Frank | Software Engineer | New York | 63 | 2010/01/04 | $125,250 |
Zorita Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $115,000 |
Jennifer Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013/02/01 | $75,650 |
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Hermione Butler | Regional Director | London | 47 | 2011/03/21 | $356,250 |
Lael Greer | Systems Administrator | London | 21 | 2009/02/27 | $103,500 |
Jonas Alexander | Developer | San Francisco | 30 | 2010/07/14 | $86,500 |
Shad Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 |
Michael Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 |
Donna Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 |
Name | Position | Office | Age | Start date | Salary |
<table id="datable_11" class="table nowrap w-100">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
<tr>
<th class="filterhead">Name</th>
<th class="filterhead">Position</th>
<th class="filterhead">Office</th>
<th class="filterhead">Age</th>
<th class="filterhead">Start date</th>
<th class="filterhead">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
$('#datable_11').DataTable( {
orderCellsTop: true,
scrollX: true,
autoWidth: false,
language: { search: "",
searchPlaceholder: "Search",
sLengthMenu: "_MENU_items",
paginate: {
next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
previous: '<i class="ri-arrow-left-s-line"></i>' // or '←'
}
},
initComplete: function () {
var api = this.api();
$('.filterhead', api.table().header()).each( function (i) {
var column = api.column(i);
var select = $('<select class="form-select form-select-sm" ><option value="">Show All</option></select>')
.appendTo( $(this).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( '<option value="'+d+'">'+d+'</option>' );
} );
} );
},
"drawCallback": function () {
$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
}
});
Method can be used to get nodes from the document regardless of paging, ordering etc. This example shows $() being used to get all input elements from the table.
Name | Age | Position | Office |
---|---|---|---|
Tiger Nixon | |||
Garrett Winters | |||
Ashton Cox | |||
Cedric Kelly | |||
Airi Satou | |||
Brielle Williamson | |||
Herrod Chandler | |||
Rhona Davidson | |||
Colleen Hurst | |||
Sonya Frost | |||
Jena Gaines | |||
Quinn Flynn | |||
Charde Marshall | |||
Haley Kennedy | |||
Tatyana Fitzpatrick | |||
Michael Silva | |||
Paul Byrd | |||
Gloria Little | |||
Bradley Greer | |||
Dai Rios | |||
Jenette Caldwell | |||
Yuri Berry | |||
Caesar Vance | |||
Doris Wilder | |||
Angelica Ramos | |||
Michael Bruce | |||
Donna Snider | |||
Name | Age | Position | Office |
<table id="datable_12" class="table nowrap">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td><input type="text" class="form-control form-control-sm" id="row-1-age" name="row-1-age" value="61"></td>
<td><input type="text" class="form-control form-control-sm" id="row-1-position" name="row-1-position" value="System Architect"></td>
<td><select size="1" class="form-select form-select-sm" id="row-1-office" name="row-1-office">
<option value="Edinburgh" selected="selected">
Edinburgh
</option>
<option value="London">
London
</option>
<option value="New York">
New York
</option>
<option value="San Francisco">
San Francisco
</option>
<option value="Tokyo">
Tokyo
</option>
</select></td>
</tr>
...
<tr>
<td>Donna Snider</td>
<td><input type="text" class="form-control form-control-sm" id="row-57-age" name="row-57-age" value="27"></td>
<td><input type="text" class="form-control form-control-sm" id="row-57-position" name="row-57-position" value="Customer Support"></td>
<td><select size="1" class="form-select form-select-sm" id="row-57-office" name="row-57-office">
<option value="Edinburgh">
Edinburgh
</option>
<option value="London">
London
</option>
<option value="New York" selected="selected">
New York
</option>
<option value="San Francisco">
San Francisco
</option>
<option value="Tokyo">
Tokyo
</option>
</select></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
</table>
var targetElem_2 = $('#datable_12');
var table = $('#datable_12').DataTable({
scrollX: true,
autoWidth: false,
language: { search: "",
searchPlaceholder: "Search",
sLengthMenu: "_MENU_items",
paginate: {
next: '<i class="ri-arrow-right-s-line"></i>', // or '→'
previous: '<i class="ri-arrow-left-s-line"></i>' // or '←'
}
},
"drawCallback": function () {
$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
},
columnDefs: [{
orderable: false,
targets: [1,2,3]
}]
});
$('<button id="add_data" class="btn btn-soft-primary btn-sm ms-2">Add row</button>').insertAfter(targetElem_2.closest('#datable_12_wrapper').find('.dataTables_length label'));
$('#add_data').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;
});
FixedColumns allows columns to be fixed from both the left and the right hand sides of the table.
Name | Position | Office | Age | Start date | Salary | Number | End date | Salary 2 |
---|---|---|---|---|---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 61 | 2011/04/25 | $320,800 |
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 63 | 2011/07/25 | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 66 | 2009/01/12 | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 22 | 2012/03/29 | $433,060 |
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 33 | 2008/11/28 | $162,700 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 61 | 2012/12/02 | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 59 | 2012/08/06 | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 | 55 | 2010/10/14 | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 | 39 | 2009/09/15 | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 | 23 | 2008/12/13 | $103,600 |
Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 | 30 | 2008/12/19 | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 | 22 | 2013/03/03 | $342,000 |
Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 | 36 | 2008/10/16 | $470,600 |
<table id="datable_14" class="table nowrap w-100">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Number</th>
<th>End date</th>
<th>Salary 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
...
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
</tbody>
</table>
$('#datable_14').removeAttr('width').DataTable({
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true,
language: { search: "",
searchPlaceholder: "Search",
sLengthMenu: "_MENU_items",
},
});