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.

How to use?

To add hs.datatables.js in your page, wrap any block in a parent element with an ID or class and add the same ID or the class in the JS INIT function of the plugin.

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

            
              <script src="../../assets/vendor/datatables/media/js/jquery.dataTables.min.js"></script>
            
          

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

            
              <script src="../../assets/js/components/hs.datatables.js"></script>
            
          

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

            
              <script>
                $(document).on('ready', function () {
                  // initialization of datatables
                  $.HSCore.components.HSDatatables.init('.js-datatable');
                });
              </script>
            
          

Basic example

Order
Client
Amount
Date
Status
FR001 Spotify $9.00 05 May Rejected
FR002 Dropbox $257.93 12 May Completed
FR003 Google $441.99 15 May Completed
FR004 FrontApp $99.00 01 Jun Pending
FR005 Slack $14.89 02 Jun Rejected
FR006 Spotify $9.00 05 Jun Completed
FR007 Htmlstream $1,579.99 15 Jun Completed
FR008 GitHub $235.85 16 Apr Rejected
FR009 Dropbox $12.31 12 Apr Completed
FR0010 Google $891.00 29 Apr Completed
FR0011 Atlassian $321.11 30 Apr Pending
FR0012 Slack $16.29 02 Mar Rejected
                  
                    <div class="table-responsive-md u-datatable">
                      <table class="js-datatable table table-borderless u-datatable__striped u-datatable__content u-datatable__trigger mb-5"'>
                        <thead>
                          <tr class="text-uppercase font-size-1">
                            <th scope="col" class="font-weight-medium">
                              <div class="d-flex justify-content-between align-items-center">
                                Order
                                <div class="ml-2">
                                  <span class="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas fa-angle-down u-datatable__thead-icon"></span>
                                </div>
                              </div>
                            </th>
                            <th scope="col" class="font-weight-medium">
                              <div class="d-flex justify-content-between align-items-center">
                                Client
                                <div class="ml-2">
                                  <span class="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas fa-angle-down u-datatable__thead-icon"></span>
                                </div>
                              </div>
                            </th>
                            <th scope="col" class="font-weight-medium">
                              <div class="d-flex justify-content-between align-items-center">
                                Amount
                                <div class="ml-2">
                                  <span class="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas fa-angle-down u-datatable__thead-icon"></span>
                                </div>
                              </div>
                            </th>
                            <th scope="col" class="font-weight-medium">
                              <div class="d-flex justify-content-between align-items-center">
                                Date
                                <div class="ml-2">
                                  <span class="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas fa-angle-down u-datatable__thead-icon"></span>
                                </div>
                              </div>
                            </th>
                            <th scope="col" class="font-weight-medium">
                              <div class="d-flex justify-content-between align-items-center">
                                Status
                                <div class="ml-2">
                                  <span class="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas fa-angle-down u-datatable__thead-icon"></span>
                                </div>
                              </div>
                            </th>
                          </tr>
                        </thead>
                        <tbody class="font-size-1">
                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR001</td>
                            <td>
                              <span>Spotify</span>
                            </td>
                            <td class="align-middle text-primary">$9.00</td>
                            <td class="align-middle text-secondary">05 May</td>
                            <td class="align-middle text-danger">Rejected</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR002</td>
                            <td>
                              <span>Dropbox</span>
                            </td>
                            <td class="align-middle text-primary">$257.93</td>
                            <td class="align-middle text-secondary">12 May</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR003</td>
                            <td>
                              <span>Google</span>
                            </td>
                            <td class="align-middle text-primary">$441.99</td>
                            <td class="align-middle text-secondary">15 May</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR004</td>
                            <td>
                              <span>FrontApp</span>
                            </td>
                            <td class="align-middle text-primary">$99.00</td>
                            <td class="align-middle text-secondary">01 Jun</td>
                            <td class="align-middle text-warning">Pending</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR005</td>
                            <td>
                              <span>Slack</span>
                            </td>
                            <td class="align-middle text-primary">$14.89</td>
                            <td class="align-middle text-secondary">02 Jun</td>
                            <td class="align-middle text-danger">Rejected</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR006</td>
                            <td>
                              <span>Spotify</span>
                            </td>
                            <td class="align-middle text-primary">$9.00</td>
                            <td class="align-middle text-secondary">05 Jun</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR007</td>
                            <td>
                              <span>Htmlstream</span>
                            </td>
                            <td class="align-middle text-primary">$1,579.99</td>
                            <td class="align-middle text-secondary">15 Jun</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR008</td>
                            <td>
                              <span>GitHub</span>
                            </td>
                            <td class="align-middle text-primary">$235.85</td>
                            <td class="align-middle text-secondary">16 Apr</td>
                            <td class="align-middle text-danger">Rejected</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR009</td>
                            <td>
                              <span>Dropbox</span>
                            </td>
                            <td class="align-middle text-primary">$12.31</td>
                            <td class="align-middle text-secondary">12 Apr</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0010</td>
                            <td>
                              <span>Google</span>
                            </td>
                            <td class="align-middle text-primary">$891.00</td>
                            <td class="align-middle text-secondary">29 Apr</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0011</td>
                            <td>
                              <span>Atlassian</span>
                            </td>
                            <td class="align-middle text-primary">$321.11</td>
                            <td class="align-middle text-secondary">30 Apr</td>
                            <td class="align-middle text-warning">Pending</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0012</td>
                            <td>
                              <span>Slack</span>
                            </td>
                            <td class="align-middle text-primary">$16.29</td>
                            <td class="align-middle text-secondary">02 Mar</td>
                            <td class="align-middle text-danger">Rejected</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  
                

With pagination

Order
Client
Amount
Date
Status
FR001 Spotify $9.00 05 May Rejected
FR002 Dropbox $257.93 12 May Completed
FR003 Google $441.99 15 May Completed
FR004 FrontApp $99.00 01 Jun Pending
FR005 Slack $14.89 02 Jun Rejected
FR006 Spotify $9.00 05 Jun Completed
FR007 Htmlstream $1,579.99 15 Jun Completed
FR008 GitHub $235.85 16 Apr Rejected
FR009 Dropbox $12.31 12 Apr Completed
FR0010 Google $891.00 29 Apr Completed
FR0011 Atlassian $321.11 30 Apr Pending
FR0012 Slack $16.29 02 Mar Rejected
FR0013 Spotify $4.00 01 Mar Completed
FR0014 Htmlstream $3,462.00 23 Mar Completed
FR0015 Spotify $9.00 27 Mar Rejected
FR0016 Dropbox $196.73 04 Feb Completed
FR0017 Google $235.99 18 Feb Completed
FR0018 FrontApp $34.00 21 Feb Pending
FR0019 Slack $72.89 28 Feb Rejected
FR0020 Spotify $9.00 05 Jan Completed
FR0021 Htmlstream $7,485.00 15 Jan Completed
FR0022 Slack $76.00 22 Jan Rejected
FR0023 Spotify $12.00 18 Jan Completed
FR0024 Htmlstream $87.43 30 Jan Completed
                  
                    <div class="table-responsive-md u-datatable">
                      <table class="js-datatable table table-borderless u-datatable__striped u-datatable__content u-datatable__trigger 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 class="text-uppercase font-size-1">
                            <th scope="col" class="font-weight-medium">
                              <div class="d-flex justify-content-between align-items-center">
                                Order
                                <div class="ml-2">
                                  <span class="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas fa-angle-down u-datatable__thead-icon"></span>
                                </div>
                              </div>
                            </th>
                            <th scope="col" class="font-weight-medium">
                              <div class="d-flex justify-content-between align-items-center">
                                Client
                                <div class="ml-2">
                                  <span class="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas fa-angle-down u-datatable__thead-icon"></span>
                                </div>
                              </div>
                            </th>
                            <th scope="col" class="font-weight-medium">
                              <div class="d-flex justify-content-between align-items-center">
                                Amount
                                <div class="ml-2">
                                  <span class="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas fa-angle-down u-datatable__thead-icon"></span>
                                </div>
                              </div>
                            </th>
                            <th scope="col" class="font-weight-medium">
                              <div class="d-flex justify-content-between align-items-center">
                                Date
                                <div class="ml-2">
                                  <span class="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas fa-angle-down u-datatable__thead-icon"></span>
                                </div>
                              </div>
                            </th>
                            <th scope="col" class="font-weight-medium">
                              <div class="d-flex justify-content-between align-items-center">
                                Status
                                <div class="ml-2">
                                  <span class="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas fa-angle-down u-datatable__thead-icon"></span>
                                </div>
                              </div>
                            </th>
                          </tr>
                        </thead>
                        <tbody class="font-size-1">
                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR001</td>
                            <td>
                              <span>Spotify</span>
                            </td>
                            <td class="align-middle text-primary">$9.00</td>
                            <td class="align-middle text-secondary">05 May</td>
                            <td class="align-middle text-danger">Rejected</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR002</td>
                            <td>
                              <span>Dropbox</span>
                            </td>
                            <td class="align-middle text-primary">$257.93</td>
                            <td class="align-middle text-secondary">12 May</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR003</td>
                            <td>
                              <span>Google</span>
                            </td>
                            <td class="align-middle text-primary">$441.99</td>
                            <td class="align-middle text-secondary">15 May</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR004</td>
                            <td>
                              <span>FrontApp</span>
                            </td>
                            <td class="align-middle text-primary">$99.00</td>
                            <td class="align-middle text-secondary">01 Jun</td>
                            <td class="align-middle text-warning">Pending</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR005</td>
                            <td>
                              <span>Slack</span>
                            </td>
                            <td class="align-middle text-primary">$14.89</td>
                            <td class="align-middle text-secondary">02 Jun</td>
                            <td class="align-middle text-danger">Rejected</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR006</td>
                            <td>
                              <span>Spotify</span>
                            </td>
                            <td class="align-middle text-primary">$9.00</td>
                            <td class="align-middle text-secondary">05 Jun</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR007</td>
                            <td>
                              <span>Htmlstream</span>
                            </td>
                            <td class="align-middle text-primary">$1,579.99</td>
                            <td class="align-middle text-secondary">15 Jun</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR008</td>
                            <td>
                              <span>GitHub</span>
                            </td>
                            <td class="align-middle text-primary">$235.85</td>
                            <td class="align-middle text-secondary">16 Apr</td>
                            <td class="align-middle text-danger">Rejected</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR009</td>
                            <td>
                              <span>Dropbox</span>
                            </td>
                            <td class="align-middle text-primary">$12.31</td>
                            <td class="align-middle text-secondary">12 Apr</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0010</td>
                            <td>
                              <span>Google</span>
                            </td>
                            <td class="align-middle text-primary">$891.00</td>
                            <td class="align-middle text-secondary">29 Apr</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0011</td>
                            <td>
                              <span>Atlassian</span>
                            </td>
                            <td class="align-middle text-primary">$321.11</td>
                            <td class="align-middle text-secondary">30 Apr</td>
                            <td class="align-middle text-warning">Pending</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0012</td>
                            <td>
                              <span>Slack</span>
                            </td>
                            <td class="align-middle text-primary">$16.29</td>
                            <td class="align-middle text-secondary">02 Mar</td>
                            <td class="align-middle text-danger">Rejected</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0013</td>
                            <td>
                              <span>Spotify</span>
                            </td>
                            <td class="align-middle text-primary">$4.00</td>
                            <td class="align-middle text-secondary">01 Mar</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0014</td>
                            <td>
                              <span>Htmlstream</span>
                            </td>
                            <td class="align-middle text-primary">$3,462.00</td>
                            <td class="align-middle text-secondary">23 Mar</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0015</td>
                            <td>
                              <span>Spotify</span>
                            </td>
                            <td class="align-middle text-primary">$9.00</td>
                            <td class="align-middle text-secondary">27 Mar</td>
                            <td class="align-middle text-danger">Rejected</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0016</td>
                            <td>
                              <span>Dropbox</span>
                            </td>
                            <td class="align-middle text-primary">$196.73</td>
                            <td class="align-middle text-secondary">04 Feb</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0017</td>
                            <td>
                              <span>Google</span>
                            </td>
                            <td class="align-middle text-primary">$235.99</td>
                            <td class="align-middle text-secondary">18 Feb</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0018</td>
                            <td>
                              <span>FrontApp</span>
                            </td>
                            <td class="align-middle text-primary">$34.00</td>
                            <td class="align-middle text-secondary">21 Feb</td>
                            <td class="align-middle text-warning">Pending</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0019</td>
                            <td>
                              <span>Slack</span>
                            </td>
                            <td class="align-middle text-primary">$72.89</td>
                            <td class="align-middle text-secondary">28 Feb</td>
                            <td class="align-middle text-danger">Rejected</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0020</td>
                            <td>
                              <span>Spotify</span>
                            </td>
                            <td class="align-middle text-primary">$9.00</td>
                            <td class="align-middle text-secondary">05 Jan</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0021</td>
                            <td>
                              <span>Htmlstream</span>
                            </td>
                            <td class="align-middle text-primary">$7,485.00</td>
                            <td class="align-middle text-secondary">15 Jan</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0022</td>
                            <td>
                              <span>Slack</span>
                            </td>
                            <td class="align-middle text-primary">$76.00</td>
                            <td class="align-middle text-secondary">22 Jan</td>
                            <td class="align-middle text-danger">Rejected</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0023</td>
                            <td>
                              <span>Spotify</span>
                            </td>
                            <td class="align-middle text-primary">$12.00</td>
                            <td class="align-middle text-secondary">18 Jan</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>

                          <tr>
                            <td class="align-middle text-secondary font-weight-normal">FR0024</td>
                            <td>
                              <span>Htmlstream</span>
                            </td>
                            <td class="align-middle text-primary">$87.43</td>
                            <td class="align-middle text-secondary">30 Jan</td>
                            <td class="align-middle text-success">Completed</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-between align-items-center">
                      <nav id="datatablePagination" aria-label="Activity pagination"></nav>

                      <small id="datatableInfo" class="text-secondary"></small>
                    </div>
                    <!-- End Pagination -->
                  
                

JavaScript behavior

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.