Datatables
Showcase your latest works with 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?
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/datatables.net/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/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
$('.table').each(function () {
var datatable = $.HSCore.components.HSDatatables.init($(this));
});
});
</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 | |
| FR0011 | Atlassian | $321.11 | 30 Apr | Pending |
| FR0012 | Slack | $16.29 | 02 Mar | Rejected |
<div class="table-responsive-md datatable">
<table id="datatable" class="table table-borderless datatable-striped datatable-content datatable-trigger mb-5">
<thead>
<tr class="text-uppercase font-size-1">
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Order
<div class="ml-2">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</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">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</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">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</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">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</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">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="font-size-1">
<tr>
<td class="align-middle text-body">FR001</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-body">05 May</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR002</td>
<td>
<span>Dropbox</span>
</td>
<td class="align-middle text-primary">$257.93</td>
<td class="align-middle text-body">12 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR003</td>
<td>
<span>Google</span>
</td>
<td class="align-middle text-primary">$441.99</td>
<td class="align-middle text-body">15 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR004</td>
<td>
<span>FrontApp</span>
</td>
<td class="align-middle text-primary">$99.00</td>
<td class="align-middle text-body">01 Jun</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr>
<td class="align-middle text-body">FR005</td>
<td>
<span>Slack</span>
</td>
<td class="align-middle text-primary">$14.89</td>
<td class="align-middle text-body">02 Jun</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR006</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-body">05 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR007</td>
<td>
<span>Htmlstream</span>
</td>
<td class="align-middle text-primary">$1,579.99</td>
<td class="align-middle text-body">15 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR008</td>
<td>
<span>GitHub</span>
</td>
<td class="align-middle text-primary">$235.85</td>
<td class="align-middle text-body">16 Apr</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR009</td>
<td>
<span>Dropbox</span>
</td>
<td class="align-middle text-primary">$12.31</td>
<td class="align-middle text-body">12 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0010</td>
<td>
<span>Google</span>
</td>
<td class="align-middle text-primary">$891.00</td>
<td class="align-middle text-body">29 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0011</td>
<td>
<span>Atlassian</span>
</td>
<td class="align-middle text-primary">$321.11</td>
<td class="align-middle text-body">30 Apr</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr>
<td class="align-middle text-body">FR0012</td>
<td>
<span>Slack</span>
</td>
<td class="align-middle text-primary">$16.29</td>
<td class="align-middle text-body">02 Mar</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
</tbody>
</table>
</div>
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 | |
| FR0011 | Atlassian | $321.11 | 30 Apr | Pending |
| FR0012 | Slack | $16.29 | 02 Mar | Rejected |
| FR0013 | Spotify | $4.00 | 01 Mar | Completed |
| FR0014 | Htmlstream | $3,462.00 | 23 Mar | Completed |
| FR0015 | Spotify | $9.00 | 27 Mar | Rejected |
| FR0016 | Dropbox | $196.73 | 04 Feb | Completed |
| FR0017 | $235.99 | 18 Feb | Completed | |
| FR0018 | FrontApp | $34.00 | 21 Feb | Pending |
| FR0019 | Slack | $72.89 | 28 Feb | Rejected |
| FR0020 | Spotify | $9.00 | 05 Jan | Completed |
| FR0021 | Htmlstream | $7,485.00 | 15 Jan | Completed |
| FR0022 | Slack | $76.00 | 22 Jan | Rejected |
| FR0023 | Spotify | $12.00 | 18 Jan | Completed |
| FR0024 | Htmlstream | $87.43 | 30 Jan | Completed |
Showing of entries
<div class="table-responsive-md datatable">
<table id="datatableWithPagination" class="table table-borderless datatable-striped datatable-content datatable-trigger mb-5"
data-hs-datatables-options='{
"info": {
"currentInterval": "#datatableWithPaginationInfoCurrentInterval",
"totalQty": "#datatableWithPaginationInfoTotalQty"
},
"pageLength": 12,
"isResponsive": false,
"isShowPaging": true,
"pagination": "datatablePagination",
"paginationClasses": "pagination mb-0"
}'>
<thead>
<tr class="text-uppercase font-size-1">
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Order
<div class="ml-2">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</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">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</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">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</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">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</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">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="font-size-1">
<tr>
<td class="align-middle text-body">FR001</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-body">05 May</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR002</td>
<td>
<span>Dropbox</span>
</td>
<td class="align-middle text-primary">$257.93</td>
<td class="align-middle text-body">12 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR003</td>
<td>
<span>Google</span>
</td>
<td class="align-middle text-primary">$441.99</td>
<td class="align-middle text-body">15 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR004</td>
<td>
<span>FrontApp</span>
</td>
<td class="align-middle text-primary">$99.00</td>
<td class="align-middle text-body">01 Jun</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr>
<td class="align-middle text-body">FR005</td>
<td>
<span>Slack</span>
</td>
<td class="align-middle text-primary">$14.89</td>
<td class="align-middle text-body">02 Jun</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR006</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-body">05 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR007</td>
<td>
<span>Htmlstream</span>
</td>
<td class="align-middle text-primary">$1,579.99</td>
<td class="align-middle text-body">15 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR008</td>
<td>
<span>GitHub</span>
</td>
<td class="align-middle text-primary">$235.85</td>
<td class="align-middle text-body">16 Apr</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR009</td>
<td>
<span>Dropbox</span>
</td>
<td class="align-middle text-primary">$12.31</td>
<td class="align-middle text-body">12 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0010</td>
<td>
<span>Google</span>
</td>
<td class="align-middle text-primary">$891.00</td>
<td class="align-middle text-body">29 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0011</td>
<td>
<span>Atlassian</span>
</td>
<td class="align-middle text-primary">$321.11</td>
<td class="align-middle text-body">30 Apr</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr>
<td class="align-middle text-body">FR0012</td>
<td>
<span>Slack</span>
</td>
<td class="align-middle text-primary">$16.29</td>
<td class="align-middle text-body">02 Mar</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR0013</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$4.00</td>
<td class="align-middle text-body">01 Mar</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0014</td>
<td>
<span>Htmlstream</span>
</td>
<td class="align-middle text-primary">$3,462.00</td>
<td class="align-middle text-body">23 Mar</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0015</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-body">27 Mar</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR0016</td>
<td>
<span>Dropbox</span>
</td>
<td class="align-middle text-primary">$196.73</td>
<td class="align-middle text-body">04 Feb</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0017</td>
<td>
<span>Google</span>
</td>
<td class="align-middle text-primary">$235.99</td>
<td class="align-middle text-body">18 Feb</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0018</td>
<td>
<span>FrontApp</span>
</td>
<td class="align-middle text-primary">$34.00</td>
<td class="align-middle text-body">21 Feb</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr>
<td class="align-middle text-body">FR0019</td>
<td>
<span>Slack</span>
</td>
<td class="align-middle text-primary">$72.89</td>
<td class="align-middle text-body">28 Feb</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR0020</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-body">05 Jan</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0021</td>
<td>
<span>Htmlstream</span>
</td>
<td class="align-middle text-primary">$7,485.00</td>
<td class="align-middle text-body">15 Jan</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0022</td>
<td>
<span>Slack</span>
</td>
<td class="align-middle text-primary">$76.00</td>
<td class="align-middle text-body">22 Jan</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR0023</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$12.00</td>
<td class="align-middle text-body">18 Jan</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0024</td>
<td>
<span>Htmlstream</span>
</td>
<td class="align-middle text-primary">$87.43</td>
<td class="align-middle text-body">30 Jan</td>
<td class="align-middle text-success">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 class="text-body">
Showing <span id="datatableWithPaginationInfoCurrentInterval"></span> of <span id="datatableWithPaginationInfoTotalQty"></span> entries
</small>
</div>
<!-- End Pagination -->
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 | |
| FR0011 | Atlassian | $321.11 | 30 Apr | Pending |
| FR0012 | Slack | $16.29 | 02 Mar | Rejected |
| FR0013 | Spotify | $4.00 | 01 Mar | Completed |
| FR0014 | Htmlstream | $3,462.00 | 23 Mar | Completed |
| FR0015 | Spotify | $9.00 | 27 Mar | Rejected |
| FR0016 | Dropbox | $196.73 | 04 Feb | Completed |
| FR0017 | $235.99 | 18 Feb | Completed | |
| FR0018 | FrontApp | $34.00 | 21 Feb | Pending |
| FR0019 | Slack | $72.89 | 28 Feb | Rejected |
| FR0020 | Spotify | $9.00 | 05 Jan | Completed |
| FR0021 | Htmlstream | $7,485.00 | 15 Jan | Completed |
| FR0022 | Slack | $76.00 | 22 Jan | Rejected |
| FR0023 | Spotify | $12.00 | 18 Jan | Completed |
| FR0024 | Htmlstream | $87.43 | 30 Jan | Completed |
<!-- Search -->
<div class="input-group input-group-sm mb-4">
<div class="input-group-prepend">
<span class="input-group-text bg-white">
<i class="fas fa-search"></i>
</span>
</div>
<input id="datatableSearch" class="form-control" type="email" placeholder="Search activities" aria-label="Search activities">
</div>
<!-- End Search -->
<div class="table-responsive-md datatable">
<table id="datatableWithSearch" class="table table-borderless datatable-striped datatable-content datatable-trigger mb-5"
data-hs-datatables-options='{
"search": "#datatableSearch",
"pageLength": 24
}'>
<thead>
<tr class="text-uppercase font-size-1">
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Order
<div class="ml-2">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</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">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</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">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</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">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</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">
<i class="fas fa-angle-up datatable-thead-icon"></i>
<i class="fas fa-angle-down datatable-thead-icon"></i>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="font-size-1">
<tr>
<td class="align-middle text-body">FR001</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-body">05 May</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR002</td>
<td>
<span>Dropbox</span>
</td>
<td class="align-middle text-primary">$257.93</td>
<td class="align-middle text-body">12 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR003</td>
<td>
<span>Google</span>
</td>
<td class="align-middle text-primary">$441.99</td>
<td class="align-middle text-body">15 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR004</td>
<td>
<span>FrontApp</span>
</td>
<td class="align-middle text-primary">$99.00</td>
<td class="align-middle text-body">01 Jun</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr>
<td class="align-middle text-body">FR005</td>
<td>
<span>Slack</span>
</td>
<td class="align-middle text-primary">$14.89</td>
<td class="align-middle text-body">02 Jun</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR006</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-body">05 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR007</td>
<td>
<span>Htmlstream</span>
</td>
<td class="align-middle text-primary">$1,579.99</td>
<td class="align-middle text-body">15 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR008</td>
<td>
<span>GitHub</span>
</td>
<td class="align-middle text-primary">$235.85</td>
<td class="align-middle text-body">16 Apr</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR009</td>
<td>
<span>Dropbox</span>
</td>
<td class="align-middle text-primary">$12.31</td>
<td class="align-middle text-body">12 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0010</td>
<td>
<span>Google</span>
</td>
<td class="align-middle text-primary">$891.00</td>
<td class="align-middle text-body">29 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0011</td>
<td>
<span>Atlassian</span>
</td>
<td class="align-middle text-primary">$321.11</td>
<td class="align-middle text-body">30 Apr</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr>
<td class="align-middle text-body">FR0012</td>
<td>
<span>Slack</span>
</td>
<td class="align-middle text-primary">$16.29</td>
<td class="align-middle text-body">02 Mar</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR0013</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$4.00</td>
<td class="align-middle text-body">01 Mar</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0014</td>
<td>
<span>Htmlstream</span>
</td>
<td class="align-middle text-primary">$3,462.00</td>
<td class="align-middle text-body">23 Mar</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0015</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-body">27 Mar</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR0016</td>
<td>
<span>Dropbox</span>
</td>
<td class="align-middle text-primary">$196.73</td>
<td class="align-middle text-body">04 Feb</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0017</td>
<td>
<span>Google</span>
</td>
<td class="align-middle text-primary">$235.99</td>
<td class="align-middle text-body">18 Feb</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0018</td>
<td>
<span>FrontApp</span>
</td>
<td class="align-middle text-primary">$34.00</td>
<td class="align-middle text-body">21 Feb</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr>
<td class="align-middle text-body">FR0019</td>
<td>
<span>Slack</span>
</td>
<td class="align-middle text-primary">$72.89</td>
<td class="align-middle text-body">28 Feb</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR0020</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-body">05 Jan</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0021</td>
<td>
<span>Htmlstream</span>
</td>
<td class="align-middle text-primary">$7,485.00</td>
<td class="align-middle text-body">15 Jan</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0022</td>
<td>
<span>Slack</span>
</td>
<td class="align-middle text-primary">$76.00</td>
<td class="align-middle text-body">22 Jan</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr>
<td class="align-middle text-body">FR0023</td>
<td>
<span>Spotify</span>
</td>
<td class="align-middle text-primary">$12.00</td>
<td class="align-middle text-body">18 Jan</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr>
<td class="align-middle text-body">FR0024</td>
<td>
<span>Htmlstream</span>
</td>
<td class="align-middle text-primary">$87.43</td>
<td class="align-middle text-body">30 Jan</td>
<td class="align-middle text-success">Completed</td>
</tr>
</tbody>
</table>
</div>
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// initialization of datatables
$('.table').each(function () {
var datatable = $.HSCore.components.HSDatatables.init($(this));
datatable.on('draw', function () {
console.log('Table redrawn');
});
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-datatables-options='{
...
// Custom
"info": {
"currentInterval": "#ID",
"totalQty": "#ID",
"divider": " to "
},
"isSelectable": false,
"isColumnsSearch": false,
"isColumnsSearchTheadAfter": false,
"Pagination": "#ID",
"paginationClasses": "pagination",
"paginationLinksClasses": "page-link",
"paginationItemsClasses": "page-item",
"paginationPrevClasses": "page-item",
"paginationPrevLinkClasses": "page-link",
"paginationPrevLinkMarkup": "<span aria-hidden=\"true\">Prev</span>",
"paginationNextClasses": "page-item",
"paginationNextLinkClasses": "page-link",
"paginationNextLinkMarkup": "<span aria-hidden=\"true\">Next</span>",
"detailsInvoker": ".invoker",
"selectAllControl": "#ID"
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-circles-options='{}'. For more detailed or missing attributes/functions, see the official Datatables documentation page.
| Parameters | Description | Default value |
|---|---|---|
|
|
ID of the block in which the index of the first row visible in the table will be generated | null |
|
|
ID of the block in which the index of the last row visible in the table will be generated | null |
|
|
Index separator | 'to' |
|
|
If true, then includes the ability to select row by click, like a checkbox |
false |
|
|
If true, then includes a mode in which it is possible to filter individual columns |
false |
|
|
If true, it transfers the filter immediately after thead, otherwise it displays as tfoot |
false |
|
|
ID of the block in which pagination will be generated | null |
|
|
Pagination classes | 'pagination' |
|
|
Pagination links classes | 'page-link' |
|
|
Pagination items classes | 'page-item' |
|
|
Classes for the prev element |
'page-item' |
|
|
Classes for the next element |
'page-item' |
|
|
Classes for the link in the prev button |
'page-link' |
|
|
Classes for the link in the next button |
'page-link' |
|
|
prev button classes |
'<span aria-hidden="true">Prev</span>' |
|
|
next button classes |
'<span aria-hidden="true">Prev</span>' |
|
|
Selector, clicking on which opens a detailed description | null |
|
|
Selector, when clicked, all checkboxes become checked |
null |