Pages extensively uses Bootstrap's .table to style its tables. Please refer to their documentation for guidelines.
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
Include the plugin stylesheet jquery.dataTables.css and other extensions inside the <head>. Please view Stylesheet inclusion guideline rules
<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">
Include the plugin javascript and extension files inside the
<body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules
<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">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>
Apply the plugin to your table.
<script>
$(document).ready(function() {
$('#myDataTable').DataTable();
});
</script><!-- 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><!-- 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><!-- Markup -->
<div class="export-options-container"></div>
<table class="table" id="tableWithExportOptions">
...
</table>
<!-- Apply the plugin -->
<script>
var table = $('#tableWithExportOptions');
var settings = {
"sDom": "<'exportOptions'T><'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,
"oTableTools": {
"sSwfPath": "assets/plugins/jquery-datatable/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
"aButtons": [{
"sExtends": "csv",
"sButtonText": "<i class='pg-grid'></i>",
}, {
"sExtends": "xls",
"sButtonText": "<i class='fa fa-file-excel-o'></i>",
}, {
"sExtends": "pdf",
"sButtonText": "<i class='fa fa-file-pdf-o'></i>",
}, {
"sExtends": "copy",
"sButtonText": "<i class='fa fa-copy'></i>",
}]
},
fnDrawCallback: function(oSettings) {
$('.export-options-container').append($('.exportOptions'));
}
};
table.dataTable(settings);
</script>
Include the dataTables ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more
Set your table options in a scope variable
$scope.options = {
"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
};Add following markup to your page. Use ui-jq and ui-options directives to apply dataTables plugin
<table class="table" ui-jq="dataTable" ui-options="options">
...
</table>