Pages UI
Search…
v5.0.1 - Pages HTML
UI Elements
Form Elements
Tables
Basic Tables
Pages extensively uses Bootstrap's
.table to style its tables. DataTables
DataTables is a highly flexible jQuery plug-in based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.
Step one
Include the plugin stylesheet
jquery.dataTables.css and other extensions inside the <head>.1
<link type="text/css" rel="stylesheet" href="assets/plugins/jquery-datatable/media/css/jquery.dataTables.css">
2
<link type="text/css" rel="stylesheet" href="assets/plugins/jquery-datatable/extensions/FixedColumns/css/dataTables.fixedColumns.min.css">
3
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/datatables-responsive/css/datatables.responsive.css">
Copied!
Step two
Include the plugin javascript and extension files inside the
<body>before core template script inclusions, if it's not there already.1
<script type="text/javascript" src="assets/plugins/jquery-datatable/media/js/jquery.dataTables.min.js">
2
<script type="text/javascript" src="assets/plugins/jquery-datatable/extensions/TableTools/js/dataTables.tableTools.min.js">
3
<script type="text/javascript" src="assets/plugins/jquery-datatable/extensions/Bootstrap/jquery-datatable-bootstrap.js">
4
<script src="assets/plugins/datatables-responsive/js/datatables.responsive.js" type="text/javascript">
5
<script src="assets/plugins/datatables-responsive/js/lodash.min.js" type="text/javascript">
Copied!
Step three
1
<table id="myDataTable" class="table table-hover" cellspacing="0" width="100%">
2
<thead>
3
<tr>
4
<th>Name</th>
5
<th>Position</th>
6
<th>Office</th>
7
<th>Age</th>
8
<th>Start date</th>
9
<th>Salary</th>
10
</tr>
11
</thead>
12
​
13
<tfoot>
14
<tr>
15
<th>Name</th>
16
<th>Position</th>
17
<th>Office</th>
18
<th>Age</th>
19
<th>Start date</th>
20
<th>Salary</th>
21
</tr>
22
</tfoot>
23
​
24
<tbody>
25
<tr>
26
<td>Tiger Nixon</td>
27
<td>System Architect</td>
28
<td>Edinburgh</td>
29
<td>61</td>
30
<td>2011/04/25</td>
31
<td>$320,800</td>
32
</tr>
33
<tr>
34
<td>Garrett Winters</td>
35
<td>Accountant</td>
36
<td>Tokyo</td>
37
<td>63</td>
38
<td>2011/07/25</td>
39
<td>$170,750</td>
40
</tr>
41
<tr>
42
<td>Ashton Cox</td>
43
<td>Junior Technical Author</td>
44
<td>San Francisco</td>
45
<td>66</td>
46
<td>2009/01/12</td>
47
<td>$86,000</td>
48
</tr>
49
<tr>
50
<td>Cedric Kelly</td>
51
<td>Senior Javascript Developer</td>
52
<td>Edinburgh</td>
53
<td>22</td>
54
<td>2012/03/29</td>
55
<td>$433,060</td>
56
</tr>
57
<tr>
58
<td>Airi Satou</td>
59
<td>Accountant</td>
60
<td>Tokyo</td>
61
<td>33</td>
62
<td>2008/11/28</td>
63
<td>$162,700</td>
64
</tr>
65
<tr>
66
<td>Brielle Williamson</td>
67
<td>Integration Specialist</td>
68
<td>New York</td>
69
<td>61</td>
70
<td>2012/12/02</td>
71
<td>$372,000</td>
72
</tr>
73
</tbody>
74
</table>
Copied!
Step four
Apply the plugin to your table.
1
<script>
2
$(document).ready(function() {
3
$('#myDataTable').DataTable();
4
});
5
</script>
Copied!
Use any of the following pre-configured settings to get DataTables customized to match your purpose. For more advanced options please refer to DataTables Documentation​
Table with a search box
1
<!-- Markup -->
2
<input type="text" id="search-table" class="form-control pull-right" placeholder="Search">
3
​
4
<table class="table" id="tableWithSearch">
5
...
6
</table>
7
​
8
<!-- Apply the plugin -->
9
<script>
10
var table = $('#tableWithSearch');
11
​
12
var settings = {
13
"sDom": "<'table-responsive't><'row'<p i>>",
14
"sPaginationType": "bootstrap",
15
"destroy": true,
16
"scrollCollapse": true,
17
"oLanguage": {
18
"sLengthMenu": "_MENU_ ",
19
"sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries"
20
},
21
"iDisplayLength": 5
22
};
23
​
24
table.dataTable();
25
​
26
// search box for table
27
$('#search-table').keyup(function() {
28
table.fnFilter($(this).val());
29
});
30
</script>
Copied!
Table with dynamic rows
1
<!-- Markup -->
2
<button id="add-row" type="button" class="btn btn-primary">Add New Row</button>
3
​
4
<table class="table" id="tableWithDynamicRows">
5
<thead>
6
<tr>
7
<th style="width:25%">Column 1</th>
8
<th style="width:30%">Column 2</th>
9
</tr>
10
</thead>
11
<tbody>
12
<tr>
13
<td>Hello</td>
14
<td>there!</td>
15
</tr>
16
</tbody>
17
</table>
18
​
19
<!-- Apply the plugin -->
20
<script>
21
var table = $('#tableWithDynamicRows');
22
​
23
var settings = {
24
"sDom": "<'table-responsive't><'row'<p i>>",
25
"sPaginationType": "bootstrap",
26
"destroy": true,
27
"scrollCollapse": true,
28
"oLanguage": {
29
"sLengthMenu": "_MENU_ ",
30
"sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries"
31
},
32
"iDisplayLength": 5
33
};
34
​
35
table.dataTable(settings);
36
​
37
$('#add-row').click(function() {
38
table.dataTable().fnAddData([
39
"Foo",
40
"Bar"
41
]);
42
});
43
</script>
Copied!
Last modified 1yr ago
Copy link