Datatables
Showcase your latest works with a a jQuery grid plugin that provides powerful portfolio system, beautiful animated filtering or any other ordered grid content.
Official documentation
For more detailed information and examples, see the official documentation: Datatables.
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 Nova 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
|
#
|
First
|
Last
|
Handle
|
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | @ftwitterat |
<div class="table-responsive-md">
<table class="js-datatable table bg-white mb-5">
<thead>
<tr>
<th scope="col" class="font-weight-semi-bold border-top-0 py-2">
<div class="d-flex justify-content-between align-items-center">
#
<div class="ml-2">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</div>
</div>
</th>
<th scope="col" class="font-weight-semi-bold border-top-0 py-2">
<div class="d-flex justify-content-between align-items-center">
First
<div class="ml-2">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</div>
</div>
</th>
<th scope="col" class="font-weight-semi-bold border-top-0 py-2">
<div class="d-flex justify-content-between align-items-center">
Last
<div class="ml-2">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</div>
</div>
</th>
<th scope="col" class="font-weight-semi-bold border-top-0 py-2">
<div class="d-flex justify-content-between align-items-center">
Handle
<div class="ml-2">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="font-size-1">
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@ftwitterat</td>
</tr>
</tbody>
</table>
</div>
With pagination
|
#
|
Column
|
Column
|
Column
|
|---|---|---|---|
| 01 | Spotify | $9.00 | Rejected |
| 02 | Dropbox | $257.93 | Completed |
| 03 | $441.99 | Completed | |
| 04 | NovaApp | $99.00 | Pending |
| 05 | Slack | $14.89 | Rejected |
| 06 | Spotify | $9.00 | Completed |
| 07 | Htmlstream | $1,579.99 | Completed |
| 08 | GitHub | $235.85 | Rejected |
| 09 | Dropbox | $12.31 | Completed |
| 010 | $891.00 | Completed | |
| 011 | Atlassian | $321.11 | Pending |
| 012 | Slack | $16.29 | Rejected |
| 013 | Spotify | $4.00 | Completed |
| 014 | Htmlstream | $3,462.00 | Completed |
| 015 | Spotify | $9.00 | Rejected |
| 016 | Dropbox | $196.73 | Completed |
| 017 | $235.99 | Completed | |
| 018 | NovaApp | $34.00 | Pending |
| 019 | Slack | $72.89 | Rejected |
| 020 | Spotify | $9.00 | Completed |
| 021 | Htmlstream | $7,485.00 | Completed |
| 022 | Slack | $76.00 | Rejected |
| 023 | Spotify | $12.00 | Completed |
| 024 | Htmlstream | $87.43 | Completed |
<div class="table-responsive-md">
<table class="js-datatable table bg-white mb-5"
data-dt-info="#datatableWithPaginationInfo"
data-dt-page-length="4"
data-dt-is-show-paging="true"
data-dt-pagination="datatablePagination"
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>
<th scope="col" class="font-weight-semi-bold border-top-0 py-2">
<div class="d-flex justify-content-between align-items-center">
#
<div class="ml-2">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</div>
</div>
</th>
<th scope="col" class="font-weight-semi-bold border-top-0 py-2">
<div class="d-flex justify-content-between align-items-center">
Column
<div class="ml-2">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</div>
</div>
</th>
<th scope="col" class="font-weight-semi-bold border-top-0 py-2">
<div class="d-flex justify-content-between align-items-center">
Column
<div class="ml-2">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</div>
</div>
</th>
<th scope="col" class="font-weight-semi-bold border-top-0 py-2">
<div class="d-flex justify-content-between align-items-center">
Column
<div class="ml-2">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Spotify</td>
<td>$9.00</td>
<td>Rejected</td>
</tr>
<tr>
<td>02</td>
<td>Dropbox</td>
<td>$257.93</td>
<td>Completed</td>
</tr>
<tr>
<td>03</td>
<td>Google</td>
<td>$441.99</td>
<td>Completed</td>
</tr>
<tr>
<td>04</td>
<td>NovaApp</td>
<td>$99.00</td>
<td>Pending</td>
</tr>
<tr>
<td>05</td>
<td>Slack</td>
<td>$14.89</td>
<td>Rejected</td>
</tr>
<tr>
<td>06</td>
<td>Spotify</td>
<td>$9.00</td>
<td>Completed</td>
</tr>
<tr>
<td>07</td>
<td>Htmlstream</td>
<td>$1,579.99</td>
<td>Completed</td>
</tr>
<tr>
<td>08</td>
<td>GitHub</td>
<td>$235.85</td>
<td>Rejected</td>
</tr>
<tr>
<td>09</td>
<td>Dropbox</td>
<td>$12.31</td>
<td>Completed</td>
</tr>
<tr>
<td>010</td>
<td>Google</td>
<td>$891.00</td>
<td>Completed</td>
</tr>
<tr>
<td>011</td>
<td>Atlassian</td>
<td>$321.11</td>
<td>Pending</td>
</tr>
<tr>
<td>012</td>
<td>Slack</td>
<td>$16.29</td>
<td>Rejected</td>
</tr>
<tr>
<td>013</td>
<td>Spotify</td>
<td>$4.00</td>
<td>Completed</td>
</tr>
<tr>
<td>014</td>
<td>Htmlstream</td>
<td>$3,462.00</td>
<td>Completed</td>
</tr>
<tr>
<td>015</td>
<td>Spotify</td>
<td>$9.00</td>
<td>Rejected</td>
</tr>
<tr>
<td>016</td>
<td>Dropbox</td>
<td>$196.73</td>
<td>Completed</td>
</tr>
<tr>
<td>017</td>
<td>Google</td>
<td>$235.99</td>
<td>Completed</td>
</tr>
<tr>
<td>018</td>
<td>NovaApp</td>
<td>$34.00</td>
<td>Pending</td>
</tr>
<tr>
<td>019</td>
<td>Slack</td>
<td>$72.89</td>
<td>Rejected</td>
</tr>
<tr>
<td>020</td>
<td>Spotify</td>
<td>$9.00</td>
<td>Completed</td>
</tr>
<tr>
<td>021</td>
<td>Htmlstream</td>
<td>$7,485.00</td>
<td>Completed</td>
</tr>
<tr>
<td>022</td>
<td>Slack</td>
<td>$76.00</td>
<td>Rejected</td>
</tr>
<tr>
<td>023</td>
<td>Spotify</td>
<td>$12.00</td>
<td>Completed</td>
</tr>
<tr>
<td>024</td>
<td>Htmlstream</td>
<td>$87.43</td>
<td>Completed</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="d-flex justify-content-between align-items-center">
<nav id="datatablePagination" aria-label="Activity pagination"></nav>
<small id="datatableInfo" class="text-secondary"></small>
</div>
<!-- End Pagination -->
With search
|
#
|
Column
|
Column
|
Column
|
|---|---|---|---|
| 001 | Spotify | $9.00 | Rejected |
| 002 | Dropbox | $257.93 | Completed |
| 003 | $441.99 | Completed | |
| 004 | NovaApp | $99.00 | Pending |
| 005 | Slack | $14.89 | Rejected |
| 006 | Spotify | $9.00 | Completed |
| 007 | Htmlstream | $1,579.99 | Completed |
| 008 | GitHub | $235.85 | Rejected |
| 009 | Dropbox | $12.31 | Completed |
| 0010 | $891.00 | Completed | |
| 0011 | Atlassian | $321.11 | Pending |
| 0012 | Slack | $16.29 | Rejected |
| 0013 | Spotify | $4.00 | Completed |
| 0014 | Htmlstream | $3,462.00 | Completed |
| 0015 | Spotify | $9.00 | Rejected |
| 0016 | Dropbox | $196.73 | Completed |
| 0017 | $235.99 | Completed | |
| 0018 | NovaApp | $34.00 | Pending |
| 0019 | Slack | $72.89 | Rejected |
| 0020 | Spotify | $9.00 | Completed |
| 0021 | Htmlstream | $7,485.00 | Completed |
| 0022 | Slack | $76.00 | Rejected |
| 0023 | Spotify | $12.00 | Completed |
| 0024 | Htmlstream | $87.43 | Completed |
<!-- Search -->
<div class="js-focus-state input-group mb-4">
<input id="datatableSearch" class="form-control bg-white border-0 pr-6" placeholder="Enter search term" type="text">
<div class="input-group-append ">
<a class="text-muted" href="#">
<i class="nova-search"></i>
</a>
</div>
</div>
<!-- End Search -->
<div class="table-responsive-md">
<table class="js-datatable table bg-white mb-5"
data-dt-info="#datatableInfo"
data-dt-search="#datatableSearch"
data-dt-entries="#datatableEntries"
data-dt-page-length="7"
data-dt-is-responsive="false"
data-dt-is-show-paging="true"
data-dt-details-invoker=".js-datatabale-details"
data-dt-select-all-control="#invoiceToggleAllCheckbox">
<thead>
<tr>
<th scope="col" class="font-weight-semi-bold border-top-0 py-2">
<div class="d-flex justify-content-between align-items-center">
#
<div class="ml-2">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</div>
</div>
</th>
<th scope="col" class="font-weight-semi-bold border-top-0 py-2">
<div class="d-flex justify-content-between align-items-center">
Column
<div class="ml-2">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</div>
</div>
</th>
<th scope="col" class="font-weight-semi-bold border-top-0 py-2">
<div class="d-flex justify-content-between align-items-center">
Column
<div class="ml-2">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</div>
</div>
</th>
<th scope="col" class="font-weight-semi-bold border-top-0 py-2">
<div class="d-flex justify-content-between align-items-center">
Column
<div class="ml-2">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Spotify</td>
<td>$9.00</td>
<td>Rejected</td>
</tr>
<tr>
<td>002</td>
<td>Dropbox</td>
<td>$257.93</td>
<td>Completed</td>
</tr>
<tr>
<td>003</td>
<td>Google</td>
<td>$441.99</td>
<td>Completed</td>
</tr>
<tr>
<td>004</td>
<td>NovaApp</td>
<td>$99.00</td>
<td>Pending</td>
</tr>
<tr>
<td>005</td>
<td>Slack</td>
<td>$14.89</td>
<td>Rejected</td>
</tr>
<tr>
<td>006</td>
<td>Spotify</td>
<td>$9.00</td>
<td>Completed</td>
</tr>
<tr>
<td>007</td>
<td>Htmlstream</td>
<td>$1,579.99</td>
<td>Completed</td>
</tr>
<tr>
<td>008</td>
<td>GitHub</td>
<td>$235.85</td>
<td>Rejected</td>
</tr>
<tr>
<td>009</td>
<td>Dropbox</td>
<td>$12.31</td>
<td>Completed</td>
</tr>
<tr>
<td>0010</td>
<td>Google</td>
<td>$891.00</td>
<td>Completed</td>
</tr>
<tr>
<td>0011</td>
<td>Atlassian</td>
<td>$321.11</td>
<td>Pending</td>
</tr>
<tr>
<td>0012</td>
<td>Slack</td>
<td>$16.29</td>
<td>Rejected</td>
</tr>
<tr>
<td>0013</td>
<td>Spotify</td>
<td>$4.00</td>
<td>Completed</td>
</tr>
<tr>
<td>0014</td>
<td>Htmlstream</td>
<td>$3,462.00</td>
<td>Completed</td>
</tr>
<tr>
<td>0015</td>
<td>Spotify</td>
<td>$9.00</td>
<td>Rejected</td>
</tr>
<tr>
<td>0016</td>
<td>Dropbox</td>
<td>$196.73</td>
<td>Completed</td>
</tr>
<tr>
<td>0017</td>
<td>Google</td>
<td>$235.99</td>
<td>Completed</td>
</tr>
<tr>
<td>0018</td>
<td>NovaApp</td>
<td>$34.00</td>
<td>Pending</td>
</tr>
<tr>
<td>0019</td>
<td>Slack</td>
<td>$72.89</td>
<td>Rejected</td>
</tr>
<tr>
<td>0020</td>
<td>Spotify</td>
<td>$9.00</td>
<td>Completed</td>
</tr>
<tr>
<td>0021</td>
<td>Htmlstream</td>
<td>$7,485.00</td>
<td>Completed</td>
</tr>
<tr>
<td>0022</td>
<td>Slack</td>
<td>$76.00</td>
<td>Rejected</td>
</tr>
<tr>
<td>0023</td>
<td>Spotify</td>
<td>$12.00</td>
<td>Completed</td>
</tr>
<tr>
<td>0024</td>
<td>Htmlstream</td>
<td>$87.43</td>
<td>Completed</td>
</tr>
</tbody>
</table>
</div>
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. |