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
<div class="table-responsive-md datatable">
<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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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
| 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 datatable">
<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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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 limited pagination
| 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 |
| 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 datatable">
<table class="js-datatable table bg-white mb-5"
data-dt-info="#datatableLimitedInfo"
data-dt-page-length="4"
data-dt-is-show-paging="true"
data-dt-pagination="datatableLimitedPagination"
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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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>
<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="datatableLimitedPagination" aria-label="Activity pagination"></nav>
<small id="datatableLimitedInfo" class="text-secondary"></small>
</div>
<!-- End Pagination -->
With search
| 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 input-group-merge 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-merge">
<a class="text-muted" href="#">
<i class="nova-search"></i>
</a>
</div>
</div>
<!-- End Search -->
<div class="table-responsive-md datatable">
<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-pagination="datatableSearchPagination"
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=''
data-dt-pagination-prev-classes="page-item"
data-dt-pagination-prev-link-classes="page-link"
data-dt-pagination-prev-link-markup=''
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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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="d-flex ml-2">
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</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>
File export
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 |
| Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010/06/09 | $725,000 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
| Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
| Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 |
| Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
| Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 |
| Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
| Michelle House | Integration Specialist | Sidney | 37 | 2011/06/02 | $95,400 |
| Suki Burks | Developer | London | 53 | 2009/10/22 | $114,500 |
| Prescott Bartlett | Technical Author | London | 27 | 2011/05/07 | $145,000 |
| Gavin Cortez | Team Leader | San Francisco | 22 | 2008/10/26 | $235,500 |
| Martena Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | $324,050 |
| Unity Butler | Marketing Designer | San Francisco | 47 | 2009/12/09 | $85,675 |
| Howard Hatfield | Office Manager | San Francisco | 51 | 2008/12/16 | $164,500 |
| Hope Fuentes | Secretary | San Francisco | 41 | 2010/02/12 | $109,850 |
| Vivian Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | $452,500 |
| Timothy Mooney | Office Manager | London | 37 | 2008/12/11 | $136,200 |
| Jackson Bradshaw | Director | New York | 65 | 2008/09/26 | $645,750 |
| Olivia Liang | Support Engineer | Singapore | 64 | 2011/02/03 | $234,500 |
| Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
| Sakura Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575 |
| Thor Walton | Developer | New York | 61 | 2013/08/11 | $98,540 |
| Finn Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | $87,500 |
| Serge Baldwin | Data Coordinator | Singapore | 64 | 2012/04/09 | $138,575 |
| Zenaida Frank | Software Engineer | New York | 63 | 2010/01/04 | $125,250 |
| Zorita Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $115,000 |
| Jennifer Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013/02/01 | $75,650 |
| Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
| Hermione Butler | Regional Director | London | 47 | 2011/03/21 | $356,250 |
| Lael Greer | Systems Administrator | London | 21 | 2009/02/27 | $103,500 |
| Jonas Alexander | Developer | San Francisco | 30 | 2010/07/14 | $86,500 |
| Shad Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 |
| Michael Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 |
| Donna Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 |
| Name | Position | Office | Age | Start date | Salary |
<div class="table-responsive-md datatable">
<table class="js-datatable-export table bg-white mb-5"
data-dt-info="#datatableWithExport"
data-dt-page-length="4"
data-dt-is-show-paging="true"
data-dt-pagination="datatableExport"
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>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<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>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
<!-- Pagination -->
<div class="d-flex justify-content-between align-items-center">
<nav id="datatableExport" aria-label="Activity pagination"></nav>
<small id="datatableExportInfo"></small>
</div>
<!-- End Pagination -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="../../assets/vendor/jszip/dist/jszip.min.js"></script>
<script src="../../assets/vendor/pdfmake/build/pdfmake.min.js"></script>
<script src="../../assets/vendor/pdfmake/build/vfs_fonts.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.colVis.min.js"></script>
<script>
$(document).on('ready', function () {
// initialization of datatables
$.HSCore.components.HSDatatables.init('.js-datatable-export', {
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
className: 'btn btn-sm btn-outline-primary mb-4 mr-1',
init: function (api, node, config) {
$(node).removeClass('btn-secondary')
}
},
{
extend: 'excel',
className: 'btn btn-sm btn-outline-primary mb-4 mr-1',
init: function (api, node, config) {
$(node).removeClass('btn-secondary')
}
},
{
extend: 'csv',
className: 'btn btn-sm btn-outline-primary mb-4 mr-1',
init: function (api, node, config) {
$(node).removeClass('btn-secondary')
}
},
{
extend: 'pdf',
className: 'btn btn-sm btn-outline-primary mb-4 mr-1',
init: function (api, node, config) {
$(node).removeClass('btn-secondary')
}
},
{
extend: 'print',
className: 'btn btn-sm btn-outline-primary mb-4 mr-1',
init: function (api, node, config) {
$(node).removeClass('btn-secondary')
}
},
]
});
});
</script>
Editable rows
Editable Rows library
Please note, this example uses Editable Rows library, for more details please check Editable Rows documentation page.
<div class="table-responsive-xl datatable">
<table class="js-sorting-col-disable js-editable-table table text-nowrap bg-white mb-5"
data-dt-info="#datatableEditableInfo"
data-dt-is-show-paging="true"
data-dt-pagination="datatableEditablePagination"
data-dt-page-length="5"
data-dt-is-responsive="false"
data-dt-pagination-classes="pagination justify-content-end font-weight-semi-bold mb-0"
data-dt-pagination-items-classes="page-item d-none d-md-block"
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='<i class="nova-angle-right icon-text icon-text-xs d-inline-block"></i>'
data-dt-pagination-prev-classes="page-item"
data-dt-pagination-prev-link-classes="page-link"
data-dt-pagination-prev-link-markup='<i class="nova-angle-left icon-text icon-text-xs d-inline-block"></i>'>
<thead>
<tr class="small">
<th class="font-weight-semi-bold py-2">
<div class="media align-items-center">
<div class="d-flex mr-2">Device</div>
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</div>
</th>
<th class="font-weight-semi-bold py-2">
<div class="media align-items-center">
<div class="d-flex mr-2">Credit Card (Number)</div>
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</div>
</th>
<th class="font-weight-semi-bold py-2">
<div class="media align-items-center">
<div class="d-flex mr-2">Added</div>
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</div>
</th>
<th class="font-weight-semi-bold py-2">
<div class="media align-items-center">
<div class="d-flex mr-2">URL</div>
<a class="d-flex ml-auto link-sorting-asc" href="#!">
<i class="nova-arrow-down icon-text icon-text-xs"></i>
</a>
<a class="d-flex link-sorting-desc" href="#!">
<i class="nova-arrow-up icon-text icon-text-xs"></i>
</a>
</div>
</th>
<th class="font-weight-semi-bold py-2 text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle py-3" data-field="device">iPhone 7 Plus</td>
<td class="align-middle py-3" data-field="credit-card-number">1317 2260 0853 9799</td>
<td class="align-middle py-3">1 second ago</td>
<td class="align-middle py-3" data-field="url">http://google.com</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">Xiaomi Redmi 4</td>
<td class="align-middle py-3" data-field="credit-card-number">2232 3635 8399 3373</td>
<td class="align-middle py-3">15 seconds ago</td>
<td class="align-middle py-3" data-field="url">http://facebook.com</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">Samsung Galaxy C7 Pro</td>
<td class="align-middle py-3" data-field="credit-card-number">9252 9171 5511 3600</td>
<td class="align-middle py-3">19 seconds ago</td>
<td class="align-middle py-3" data-field="url">http://wikipedia.org</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">Honor 8 Lite</td>
<td class="align-middle py-3" data-field="credit-card-number">3129 0713 0072 6258</td>
<td class="align-middle py-3">26 seconds ago</td>
<td class="align-middle py-3" data-field="url">http://yahoo.com</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle border-bottom py-3" data-field="device">Vivo V5s</td>
<td class="align-middle border-bottom py-3" data-field="credit-card-number">3469 7641 1441 1026</td>
<td class="align-middle border-bottom py-3">31 seconds ago</td>
<td class="align-middle border-bottom py-3" data-field="url">http://reddit.com</td>
<td class="align-middle border-bottom py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">iPhone 7 Plus</td>
<td class="align-middle py-3" data-field="credit-card-number">1317 2260 0853 9799</td>
<td class="align-middle py-3">1 second ago</td>
<td class="align-middle py-3" data-field="url">http://google.com</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">Xiaomi Redmi 4</td>
<td class="align-middle py-3" data-field="credit-card-number">2232 3635 8399 3373</td>
<td class="align-middle py-3">15 seconds ago</td>
<td class="align-middle py-3" data-field="url">http://facebook.com</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">Samsung Galaxy C7 Pro</td>
<td class="align-middle py-3" data-field="credit-card-number">9252 9171 5511 3600</td>
<td class="align-middle py-3">19 seconds ago</td>
<td class="align-middle py-3" data-field="url">http://wikipedia.org</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">Honor 8 Lite</td>
<td class="align-middle py-3" data-field="credit-card-number">3129 0713 0072 6258</td>
<td class="align-middle py-3">26 seconds ago</td>
<td class="align-middle py-3" data-field="url">http://yahoo.com</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle border-bottom py-3" data-field="device">Vivo V5s</td>
<td class="align-middle border-bottom py-3" data-field="credit-card-number">3469 7641 1441 1026</td>
<td class="align-middle border-bottom py-3">31 seconds ago</td>
<td class="align-middle border-bottom py-3" data-field="url">http://reddit.com</td>
<td class="align-middle border-bottom py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">iPhone 7 Plus</td>
<td class="align-middle py-3" data-field="credit-card-number">1317 2260 0853 9799</td>
<td class="align-middle py-3">1 second ago</td>
<td class="align-middle py-3" data-field="url">http://google.com</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">Xiaomi Redmi 4</td>
<td class="align-middle py-3" data-field="credit-card-number">2232 3635 8399 3373</td>
<td class="align-middle py-3">15 seconds ago</td>
<td class="align-middle py-3" data-field="url">http://facebook.com</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">Samsung Galaxy C7 Pro</td>
<td class="align-middle py-3" data-field="credit-card-number">9252 9171 5511 3600</td>
<td class="align-middle py-3">19 seconds ago</td>
<td class="align-middle py-3" data-field="url">http://wikipedia.org</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">Honor 8 Lite</td>
<td class="align-middle py-3" data-field="credit-card-number">3129 0713 0072 6258</td>
<td class="align-middle py-3">26 seconds ago</td>
<td class="align-middle py-3" data-field="url">http://yahoo.com</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle border-bottom py-3" data-field="device">Vivo V5s</td>
<td class="align-middle border-bottom py-3" data-field="credit-card-number">3469 7641 1441 1026</td>
<td class="align-middle border-bottom py-3">31 seconds ago</td>
<td class="align-middle border-bottom py-3" data-field="url">http://reddit.com</td>
<td class="align-middle border-bottom py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">iPhone 7 Plus</td>
<td class="align-middle py-3" data-field="credit-card-number">1317 2260 0853 9799</td>
<td class="align-middle py-3">1 second ago</td>
<td class="align-middle py-3" data-field="url">http://google.com</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">Xiaomi Redmi 4</td>
<td class="align-middle py-3" data-field="credit-card-number">2232 3635 8399 3373</td>
<td class="align-middle py-3">15 seconds ago</td>
<td class="align-middle py-3" data-field="url">http://facebook.com</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">Samsung Galaxy C7 Pro</td>
<td class="align-middle py-3" data-field="credit-card-number">9252 9171 5511 3600</td>
<td class="align-middle py-3">19 seconds ago</td>
<td class="align-middle py-3" data-field="url">http://wikipedia.org</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle py-3" data-field="device">Honor 8 Lite</td>
<td class="align-middle py-3" data-field="credit-card-number">3129 0713 0072 6258</td>
<td class="align-middle py-3">26 seconds ago</td>
<td class="align-middle py-3" data-field="url">http://yahoo.com</td>
<td class="align-middle py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
<tr>
<td class="align-middle border-bottom py-3" data-field="device">Vivo V5s</td>
<td class="align-middle border-bottom py-3" data-field="credit-card-number">3469 7641 1441 1026</td>
<td class="align-middle border-bottom py-3">31 seconds ago</td>
<td class="align-middle border-bottom py-3" data-field="url">http://reddit.com</td>
<td class="align-middle border-bottom py-3 text-center">
<a class="js-edit link-dark" href="#!">
<i class="nova-pencil icon-text"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Info -->
<div class="d-block d-md-flex align-items-center">
<div id="datatableEditableInfo" class="d-flex mb-2 mb-md-0"></div>
<nav id="datatableEditablePagination" class="d-flex ml-md-auto d-print-none" aria-label="Pagination"></nav>
</div>
<!-- End Info -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/table-edits/build/table-edits.min.js"></script>
<script src="../../assets/vendor/datatables/media/js/jquery.dataTables.min.js"></script>
<!-- JS Nova -->
<script src="../../assets/js/components/hs.datatables.js"></script>
<script>
$(document).on('ready', function () {
// initialization of editable table
$('.js-editable-table tbody tr').editable({
keyboard: true,
dblclick: true,
button: true,
buttonSelector: '.js-edit',
maintainWidth: true,
edit: function (values) {
$('.js-edit i', this).removeClass('nova-pencil').addClass('nova-check');
$(this).find('td[data-field] input').addClass('form-control form-control-sm');
},
save: function (values) {
$('.js-edit i', this).removeClass('nova-check').addClass('nova-pencil');
},
cancel: function (values) {
$('.js-edit i', this).removeClass('nova-check').addClass('nova-pencil');
}
});
// initialization of datatables
$.HSCore.components.HSDatatables.init('.js-sorting-col-disable', {
"columnDefs": [
{ "orderable": false, "targets": 4 }
]
});
});
</script>
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. |