Pages UI
Search…
Pages UI
v5.0.1 - Pages HTML
Getting Started
Introduction
Layouts
Themes
Sass
Content
Apps
Calendar
Social
Email
API Reference
UI Elements
Color
Typopgrahy
Icons
Buttons
Notifications
Modals
Progressbar
Collapse
Tabs
Sliders
Treeview
Nestable
Form Elements
Checkboxes and Radio
Toggle
Typehead
Selectbox
Datepicker
Masked Input
Autonumeric
Quill Editor
Tags Input
File Upload
Form Layouts
Form Validation
Form Wizard
Charts
Maps
Google Maps
Vector Maps
Tables
Cards
Timeline
Views
Grid
Helpers
Troubleshooting
Browser Support
Change log
Legacy Docs
Other
Grunt
Gulp
Rails
Powered By GitBook
Tables

Basic Tables

Pages extensively uses Bootstrap's .table to style its tables.
Please refer to their documentation for guidelines. Bootstrap 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.
Please refer to DataTables Documentation to learn about plugin options
Step one
Include the plugin stylesheet jquery.dataTables.css and other extensions inside the <head>.
<link type="text/css" rel="stylesheet" href="assets/plugins/jquery-datatable/media/css/jquery.dataTables.css">
<link type="text/css" rel="stylesheet" href="assets/plugins/jquery-datatable/extensions/FixedColumns/css/dataTables.fixedColumns.min.css">
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/datatables-responsive/css/datatables.responsive.css">
Step two
Include the plugin javascript and extension files inside the <body>before core template script inclusions, if it's not there already.
<script type="text/javascript" src="assets/plugins/jquery-datatable/media/js/jquery.dataTables.min.js">
<script type="text/javascript" src="assets/plugins/jquery-datatable/extensions/TableTools/js/dataTables.tableTools.min.js">
<script type="text/javascript" src="assets/plugins/jquery-datatable/extensions/Bootstrap/jquery-datatable-bootstrap.js">
<script src="assets/plugins/datatables-responsive/js/datatables.responsive.js" type="text/javascript">
<script src="assets/plugins/datatables-responsive/js/lodash.min.js" type="text/javascript">
Step three
Create the markup for your table. You can also add Bootstrap table classes to customize the look
<table id="myDataTable" class="table table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
​
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
​
<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>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>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
</tbody>
</table>
Step four
Apply the plugin to your table.
<script>
$(document).ready(function() {
$('#myDataTable').DataTable();
});
</script>
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​
<!-- Markup -->
<input type="text" id="search-table" class="form-control pull-right" placeholder="Search">
​
<table class="table" id="tableWithSearch">
...
</table>
​
<!-- Apply the plugin -->
<script>
var table = $('#tableWithSearch');
​
var settings = {
"sDom": "<'table-responsive't><'row'<p i>>",
"sPaginationType": "bootstrap",
"destroy": true,
"scrollCollapse": true,
"oLanguage": {
"sLengthMenu": "_MENU_ ",
"sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries"
},
"iDisplayLength": 5
};
​
table.dataTable();
​
// search box for table
$('#search-table').keyup(function() {
table.fnFilter($(this).val());
});
</script>

Table with dynamic rows

<!-- Markup -->
<button id="add-row" type="button" class="btn btn-primary">Add New Row</button>
​
<table class="table" id="tableWithDynamicRows">
<thead>
<tr>
<th style="width:25%">Column 1</th>
<th style="width:30%">Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>there!</td>
</tr>
</tbody>
</table>
​
<!-- Apply the plugin -->
<script>
var table = $('#tableWithDynamicRows');
​
var settings = {
"sDom": "<'table-responsive't><'row'<p i>>",
"sPaginationType": "bootstrap",
"destroy": true,
"scrollCollapse": true,
"oLanguage": {
"sLengthMenu": "_MENU_ ",
"sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries"
},
"iDisplayLength": 5
};
​
table.dataTable(settings);
​
$('#add-row').click(function() {
table.dataTable().fnAddData([
"Foo",
"Bar"
]);
});
</script>
Maps - Previous
Vector Maps
Next
Cards
Last modified 2yr ago
Copy link
On this page
Basic Tables
DataTables
Table with a search box
Table with dynamic rows