Bootstrap Datatables | Nova - Responsive WebApp UI Kit

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>

Search:

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@ftwitterat

<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

Result
HTML

Show entries

Search:

#	Column	Column	Column
01	Spotify	$9.00	Rejected
02	Dropbox	$257.93	Completed
03	Google	$441.99	Completed
04	NovaApp	$99.00	Pending

Showing 1 to 7 of 24 Entries

<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

Result
HTML

Show entries

Search:

#	Column	Column	Column
01	Spotify	$9.00	Rejected
01	Spotify	$9.00	Rejected
02	Dropbox	$257.93	Completed
02	Dropbox	$257.93	Completed

Showing 1 to 4 of 48 Entries

<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

Result
HTML

Show entries

Search:

#	Column	Column	Column
001	Spotify	$9.00	Rejected
002	Dropbox	$257.93	Completed
003	Google	$441.99	Completed
004	NovaApp	$99.00	Pending
005	Slack	$14.89	Rejected
006	Spotify	$9.00	Completed
007	Htmlstream	$1,579.99	Completed

1234

<!-- 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

Search:

Name	Position	Office	Age	Start date	Salary
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,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>

Entries select

Select2 library

Please note, this example uses Select2 library, for more details please check Select2 documentation page.

Show entries

Search:

#	Column	Column	Column
01	Spotify	$9.00	Rejected
02	Dropbox	$257.93	Completed
03	Google	$441.99	Completed
04	NovaApp	$99.00	Pending
05	Slack	$14.89	Rejected

Show:

Showing 1 to 5 of 24 Entries

<div class="table-responsive-xl datatable">
  <table class="js-datatable table text-nowrap bg-white mb-5"
     data-dt-info="#datatableEntriesInfo"
     data-dt-entries="#datatableEntriesSelect"
     data-dt-is-show-paging="true"
     data-dt-pagination="datatableEntriesPagination"
     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>
      <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>

<!-- Info -->
<div class="d-block d-md-flex align-items-center">
  <div class="d-flex align-items-center mb-2 mb-md-0 ml-md-3">
    <span class="text-muted mr-2">Show:</span>

    <select id="datatableEntriesSelect" class="js-custom-select"
            data-classes="custom-select-without-bordered">
      <option value="5" selected>5 entries</option>
      <option value="10">10 entries</option>
      <option value="15">15 entries</option>
      <option value="20">20 entries</option>
    </select>
  </div>

  <div id="datatableEntriesInfo" class="d-flex mb-2 mb-md-0"></div>

  <nav id="datatableEntriesPagination" class="d-flex ml-md-auto d-print-none" aria-label="Pagination"></nav>
</div>
<!-- End Info -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/select2/dist/js/select2.full.min.js"></script>
<script src="../../assets/vendor/datatables/media/js/jquery.dataTables.min.js"></script>

<!-- JS Nova -->
<script src="../../assets/js/components/hs.select2.js"></script>
<script src="../../assets/js/components/hs.datatables.js"></script>

<script>
  $(document).on('ready', function () {
    // initialization of show on type module
    $.HSCore.components.HSSelect2.init('.js-custom-select');

    // initialization of datatables
    $.HSCore.components.HSDatatables.init('.js-datatable');
  });
</script>

<link rel="stylesheet" href="../../assets/vendor/select2/dist/css/select2.min.css">

Editable rows

Editable Rows library

Please note, this example uses Editable Rows library, for more details please check Editable Rows documentation page.

Show entries

Search:

Device	Credit Card (Number)	Added	URL
Honor 8 Lite	3129 0713 0072 6258	26 seconds ago	http://yahoo.com
Honor 8 Lite	3129 0713 0072 6258	26 seconds ago	http://yahoo.com
Honor 8 Lite	3129 0713 0072 6258	26 seconds ago	http://yahoo.com
Honor 8 Lite	3129 0713 0072 6258	26 seconds ago	http://yahoo.com
iPhone 7 Plus	1317 2260 0853 9799	1 second ago	http://google.com

Showing 1 to 5 of 20 Entries

<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
`data-dt-info`	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.
`data-dt-search`	The `search option` allows the way DataTables performs filtering to be set during the initialisation, and to set an initial global filter.
`data-dt-is-columns-search-thead-after`	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.
`data-dt-entries`	Shows how many entries to show.
`data-dt-pagination`	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.
`data-dt-details-invoker`	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.
`data-dt-page-length`	Number of rows to display on a single page when using pagination.
`data-dt-is-responsive`	This option provides the ability to enable and configure Responsive for DataTables.
`data-dt-is-selectable`	Set the element selector used for mouse event capture to select items.
`data-dt-is-columns-search`	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.
`data-dt-is-show-paging`	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.
`data-dt-scroll-height`	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.
`data-dt-pagination-classes`	A wrapping classes to identify the parent class for pagination.
`data-dt-pagination-items-classes`	A wrapping classes to identify the item class for pagination.
`data-dt-pagination-links-classes`	A wrapping classes to identify the link class for pagination.
`data-dt-pagination-next-classes`	A wrapping classes to identify the next preview class for pagination.
`data-dt-pagination-next-link-classes`	A wrapping classes to identify the next preview link class for pagination.
`data-dt-pagination-next-link-markup`	A wrapping classes to identify the next preview link markup for pagination.
`data-dt-pagination-prev-classes`	A wrapping classes to identify the previous preview class for pagination.
`data-dt-pagination-prev-link-classes`	A wrapping classes to identify the previous preview link class for pagination.
`data-dt-pagination-prev-link-markup`	A wrapping classes to identify the previous preview link markup for pagination.

Datatables

Official documentation

How to use?

Basic example

With search

File export

Entries select

Select2 library

Editable rows

Editable Rows library

JavaScript behavior

Methods