Datatables
A highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
How to use?
To add hs.datatables.js in your page, wrap any block in a parent element with an ID or class and add the same ID or the class in the JS init function of the plugin.
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="assets/vendor/datatables/media/js/jquery.dataTables.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="assets/js/components/hs.datatables.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of datatables
$.HSCore.components.HSDatatables.init('.js-datatable');
});
</script>
Basic example
|
Order
|
Client
|
Amount
|
Date
|
Status
|
|---|---|---|---|---|
| FR001 | Spotify | $9.00 | 05 May | Rejected |
| FR002 | Dropbox | $257.93 | 12 May | Completed |
| FR003 | $441.99 | 15 May | Completed | |
| FR004 | FrontApp | $99.00 | 01 Jun | Pending |
| FR005 | Slack | $14.89 | 02 Jun | Rejected |
| FR006 | Spotify | $9.00 | 05 Jun | Completed |
| FR007 | Htmlstream | $1,579.99 | 15 Jun | Completed |
| FR008 | GitHub | $235.85 | 16 Apr | Rejected |
| FR009 | Dropbox | $12.31 | 12 Apr | Completed |
| FR0010 | $891.00 | 29 Apr | Completed |
<!-- Basic Table -->
<div class="table-responsive-md u-datatable">
<table class="js-datatable table">
<thead>
<tr class="text-uppercase font-size-14">
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Order
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Client
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Amount
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Date
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Status
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="font-size-14">
<tr>
<td class="align-middle text-secondary font-weight-normal">FR001</td>
<td class="align-middle">Spotify</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-secondary">05 May</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR002</td>
<td class="align-middle">Dropbox</td>
<td class="align-middle text-primary">$257.93</td>
<td class="align-middle text-secondary">12 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR003</td>
<td class="align-middle">Google</td>
<td class="align-middle text-primary">$441.99</td>
<td class="align-middle text-secondary">15 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR004</td>
<td class="align-middle">FrontApp</td>
<td class="align-middle text-primary">$99.00</td>
<td class="align-middle text-secondary">01 Jun</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR005</td>
<td class="align-middle">Slack</td>
<td class="align-middle text-primary">$14.89</td>
<td class="align-middle text-secondary">02 Jun</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR006</td>
<td class="align-middle">Spotify</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-secondary">05 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR007</td>
<td class="align-middle">Htmlstream</td>
<td class="align-middle text-primary">$1,579.99</td>
<td class="align-middle text-secondary">15 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR008</td>
<td class="align-middle">GitHub</td>
<td class="align-middle text-primary">$235.85</td>
<td class="align-middle text-secondary">16 Apr</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR009</td>
<td class="align-middle">Dropbox</td>
<td class="align-middle text-primary">$12.31</td>
<td class="align-middle text-secondary">12 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR0010</td>
<td class="align-middle">Google</td>
<td class="align-middle text-primary">$891.00</td>
<td class="align-middle text-secondary">29 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
</tbody>
</table>
</div>
<!-- End Basic Table -->
With pagination
|
Order
|
Client
|
Amount
|
Date
|
Status
|
|---|---|---|---|---|
| FR001 | Spotify | $9.00 | 05 May | Rejected |
| FR002 | Dropbox | $257.93 | 12 May | Completed |
| FR003 | $441.99 | 15 May | Completed | |
| FR004 | FrontApp | $99.00 | 01 Jun | Pending |
| FR005 | Slack | $14.89 | 02 Jun | Rejected |
| FR006 | Spotify | $9.00 | 05 Jun | Completed |
| FR007 | Htmlstream | $1,579.99 | 15 Jun | Completed |
| FR008 | GitHub | $235.85 | 16 Apr | Rejected |
| FR009 | Dropbox | $12.31 | 12 Apr | Completed |
| FR0010 | $891.00 | 29 Apr | Completed |
<!-- With Pagination Table -->
<div class="table-responsive-md u-datatable">
<table class="js-datatable table"
data-dt-info="#datatableWithPaginationInfo"
data-dt-page-length="4"
data-dt-is-show-paging="true"
data-dt-pagination="datatableWithPagination"
data-dt-pagination-classes="pagination mb-0"
data-dt-pagination-items-classes="page-item"
data-dt-pagination-links-classes="page-link"
data-dt-pagination-next-classes="page-item"
data-dt-pagination-next-link-classes="page-link"
data-dt-pagination-next-link-markup='<span aria-hidden="true">»</span>'
data-dt-pagination-prev-classes="page-item"
data-dt-pagination-prev-link-classes="page-link"
data-dt-pagination-prev-link-markup='<span aria-hidden="true">«</span>'>
<thead>
<tr class="text-uppercase font-size-14">
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Order
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Client
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Amount
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Date
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Status
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="font-size-14">
<tr>
<td class="align-middle text-secondary font-weight-normal">FR001</td>
<td class="align-middle">Spotify</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-secondary">05 May</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR002</td>
<td class="align-middle">Dropbox</td>
<td class="align-middle text-primary">$257.93</td>
<td class="align-middle text-secondary">12 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR003</td>
<td class="align-middle">Google</td>
<td class="align-middle text-primary">$441.99</td>
<td class="align-middle text-secondary">15 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR004</td>
<td class="align-middle">FrontApp</td>
<td class="align-middle text-primary">$99.00</td>
<td class="align-middle text-secondary">01 Jun</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR005</td>
<td class="align-middle">Slack</td>
<td class="align-middle text-primary">$14.89</td>
<td class="align-middle text-secondary">02 Jun</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR006</td>
<td class="align-middle">Spotify</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-secondary">05 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR007</td>
<td class="align-middle">Htmlstream</td>
<td class="align-middle text-primary">$1,579.99</td>
<td class="align-middle text-secondary">15 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR008</td>
<td class="align-middle">GitHub</td>
<td class="align-middle text-primary">$235.85</td>
<td class="align-middle text-secondary">16 Apr</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR009</td>
<td class="align-middle">Dropbox</td>
<td class="align-middle text-primary">$12.31</td>
<td class="align-middle text-secondary">12 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR0010</td>
<td class="align-middle">Google</td>
<td class="align-middle text-primary">$891.00</td>
<td class="align-middle text-secondary">29 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
</tbody>
</table>
</div>
<!-- End With Pagination Table -->
<!-- With Pagination Table -->
<div class="d-flex justify-content-between align-items-center">
<nav id="datatableWithPagination" aria-label="With pagination"></nav>
<small id="datatableWithPaginationInfo" class="text-secondary"></small>
</div>
<!-- End With Pagination Table -->
With search
|
Order
|
Client
|
Amount
|
Date
|
Status
|
|---|---|---|---|---|
| FR001 | Spotify | $9.00 | 05 May | Rejected |
| FR002 | Dropbox | $257.93 | 12 May | Completed |
| FR003 | $441.99 | 15 May | Completed | |
| FR004 | FrontApp | $99.00 | 01 Jun | Pending |
| FR005 | Slack | $14.89 | 02 Jun | Rejected |
| FR006 | Spotify | $9.00 | 05 Jun | Completed |
| FR007 | Htmlstream | $1,579.99 | 15 Jun | Completed |
| FR008 | GitHub | $235.85 | 16 Apr | Rejected |
| FR009 | Dropbox | $12.31 | 12 Apr | Completed |
| FR0010 | $891.00 | 29 Apr | Completed |
<!-- Search -->
<div class="js-focus-state input-group input-group-sm u-form u-form--sm mb-4">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-search u-form__text-inner"></span>
</span>
</div>
<input id="datatableSearch" class="form-control u-form__input" type="email" placeholder="Search activities" aria-label="Search activities">
</div>
<!-- End Search -->
<!-- With Search Table -->
<div class="table-responsive-md u-datatable">
<table class="js-datatable table"
data-dt-search="#datatableSearch">
<thead>
<tr class="text-uppercase font-size-14">
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Order
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Client
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Amount
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Date
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Status
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="font-size-14">
<tr>
<td class="align-middle text-secondary font-weight-normal">FR001</td>
<td class="align-middle">Spotify</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-secondary">05 May</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR002</td>
<td class="align-middle">Dropbox</td>
<td class="align-middle text-primary">$257.93</td>
<td class="align-middle text-secondary">12 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR003</td>
<td class="align-middle">Google</td>
<td class="align-middle text-primary">$441.99</td>
<td class="align-middle text-secondary">15 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR004</td>
<td class="align-middle">FrontApp</td>
<td class="align-middle text-primary">$99.00</td>
<td class="align-middle text-secondary">01 Jun</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR005</td>
<td class="align-middle">Slack</td>
<td class="align-middle text-primary">$14.89</td>
<td class="align-middle text-secondary">02 Jun</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR006</td>
<td class="align-middle">Spotify</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-secondary">05 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR007</td>
<td class="align-middle">Htmlstream</td>
<td class="align-middle text-primary">$1,579.99</td>
<td class="align-middle text-secondary">15 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR008</td>
<td class="align-middle">GitHub</td>
<td class="align-middle text-primary">$235.85</td>
<td class="align-middle text-secondary">16 Apr</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR009</td>
<td class="align-middle">Dropbox</td>
<td class="align-middle text-primary">$12.31</td>
<td class="align-middle text-secondary">12 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-secondary font-weight-normal">FR0010</td>
<td class="align-middle">Google</td>
<td class="align-middle text-primary">$891.00</td>
<td class="align-middle text-secondary">29 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
</tbody>
</table>
</div>
<!-- End With Search Table -->
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-dt-info="".
| Attribute | Description |
|---|---|
|
|
When this option is enabled, Datatables will show information about the table including information about filtered data if that action is being performed. This option allows that feature to be enabled or disabled. |
|
|
The search option allows the way DataTables performs filtering to be set during the initialisation, and to set an initial global filter. |
|
|
The search option allows the way DataTables performs filtering for ::after pseudo within thead to be set during the initialisation, and to set an initial global filter. |
|
|
Shows how many entries to show. |
|
|
The pagination option of DataTables will display a pagination control below the table (by default, its position can be changed using dom and CSS) with buttons that the end user can use to navigate the pages of the table. Which buttons are shown in the pagination control are defined by the option given here. |
|
|
Column/selector for child row display control when using column details type. When the column type is selected for the responsive.details.type option, this option provides the ability to control what element in the table will activate the show / hide control in each row. This can be one of an column index, or a jQuery selector, as detailed below. |
|
|
Number of rows to display on a single page when using pagination. |
|
|
This option provides the ability to enable and configure Responsive for DataTables. |
|
|
Set the element selector used for mouse event capture to select items. |
|
|
Using this parameter, you can defined if DataTables should include this column in the filterable data in the table. You may want use this option to display filtering on generated columns such as 'Edit' and 'Delete' buttons for example. |
|
|
DataTables can split the rows in tables into individual pages, which is an efficient method of showing a large number of records in a small space. The end user is provided with controls to request the display of different data as the navigate through the data. This feature is enabled by default, but if you wish to disable it, you may do so with this parameter. |
|
|
Set the row height, or how the row height is calculated. It is important for Scroller to know the height of the rows in the DataTable so it can perform its virtual display calculations. All rows must be of the same height, and Scroller will attempt to automatically calculate the height of rows itself. |
|
|
A wrapping classes to identify the parent class for pagination. |
|
|
A wrapping classes to identify the item class for pagination. |
|
|
A wrapping classes to identify the link class for pagination. |
|
|
A wrapping classes to identify the next preview class for pagination. |
|
|
A wrapping classes to identify the next preview link class for pagination. |
|
|
A wrapping classes to identify the next preview link markup for pagination. |
|
|
A wrapping classes to identify the previous preview class for pagination. |
|
|
A wrapping classes to identify the previous preview link class for pagination. |
|
|
A wrapping classes to identify the previous preview link markup for pagination. |
Official Documentation
For more detailed information, see the official documentation: Datatables.