Datatables

Showcase your latest works with a jQuery grid plugin that provides powerful portfolio system, beautiful animated filtering or any other ordered grid content.

Official documentation

For more detailed information and examples, see the official documentation: Datatables .

How to use?

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

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

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

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

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

                  
                    <script>
                      $(document).on('ready', function () {
                        // initialization of datatables
                        $('.table').each(function () {
                          var datatable = $.HSCore.components.HSDatatables.init($(this));
                        });
                      });
                    </script>
                  
                

Basic example

Order
Client
Amount
Date
Status
FR001 Spotify $9.00 05 May Rejected
FR002 Dropbox $257.93 12 May Completed
FR003 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 datatable">
                            <table id="datatable" class="table table-borderless datatable-striped datatable-content datatable-trigger mb-5">
                              <thead>
                                <tr class="text-uppercase font-size-1">
                                  <th scope="col" class="font-weight-medium">
                                    <div class="d-flex justify-content-between align-items-center">
                                      Order
                                      <div class="ml-2">
                                        <i class="fas fa-angle-up datatable-thead-icon"></i>
                                        <i class="fas fa-angle-down datatable-thead-icon"></i>
                                      </div>
                                    </div>
                                  </th>
                                  <th scope="col" class="font-weight-medium">
                                    <div class="d-flex justify-content-between align-items-center">
                                      Client
                                      <div class="ml-2">
                                        <i class="fas fa-angle-up datatable-thead-icon"></i>
                                        <i class="fas fa-angle-down datatable-thead-icon"></i>
                                      </div>
                                    </div>
                                  </th>
                                  <th scope="col" class="font-weight-medium">
                                    <div class="d-flex justify-content-between align-items-center">
                                      Amount
                                      <div class="ml-2">
                                        <i class="fas fa-angle-up datatable-thead-icon"></i>
                                        <i class="fas fa-angle-down datatable-thead-icon"></i>
                                      </div>
                                    </div>
                                  </th>
                                  <th scope="col" class="font-weight-medium">
                                    <div class="d-flex justify-content-between align-items-center">
                                      Date
                                      <div class="ml-2">
                                        <i class="fas fa-angle-up datatable-thead-icon"></i>
                                        <i class="fas fa-angle-down datatable-thead-icon"></i>
                                      </div>
                                    </div>
                                  </th>
                                  <th scope="col" class="font-weight-medium">
                                    <div class="d-flex justify-content-between align-items-center">
                                      Status
                                      <div class="ml-2">
                                        <i class="fas fa-angle-up datatable-thead-icon"></i>
                                        <i class="fas fa-angle-down datatable-thead-icon"></i>
                                      </div>
                                    </div>
                                  </th>
                                </tr>
                              </thead>
                              <tbody class="font-size-1">
                                <tr>
                                  <td class="align-middle text-body">FR001</td>
                                  <td>
                                    <span>Spotify</span>
                                  </td>
                                  <td class="align-middle text-primary">$9.00</td>
                                  <td class="align-middle text-body">05 May</td>
                                  <td class="align-middle text-danger">Rejected</td>
                                </tr>

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

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

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

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

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

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

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

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

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

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

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

With pagination

Order
Client
Amount
Date
Status
FR001 Spotify $9.00 05 May Rejected
FR002 Dropbox $257.93 12 May Completed
FR003 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
Showing of entries
                        
                          <div class="table-responsive-md datatable">
                            <table id="datatableWithPagination" class="table table-borderless datatable-striped datatable-content datatable-trigger mb-5"
                                   data-hs-datatables-options='{
                                     "info": {
                                       "currentInterval": "#datatableWithPaginationInfoCurrentInterval",
                                       "totalQty": "#datatableWithPaginationInfoTotalQty"
                                     },
                                     "pageLength": 12,
                                     "isResponsive": false,
                                     "isShowPaging": true,
                                     "pagination": "datatablePagination",
                                     "paginationClasses": "pagination mb-0"
                                   }'>
                              <thead>
                                <tr class="text-uppercase font-size-1">
                                  <th scope="col" class="font-weight-medium">
                                    <div class="d-flex justify-content-between align-items-center">
                                      Order
                                      <div class="ml-2">
                                        <i class="fas fa-angle-up datatable-thead-icon"></i>
                                        <i class="fas fa-angle-down datatable-thead-icon"></i>
                                      </div>
                                    </div>
                                  </th>
                                  <th scope="col" class="font-weight-medium">
                                    <div class="d-flex justify-content-between align-items-center">
                                      Client
                                      <div class="ml-2">
                                        <i class="fas fa-angle-up datatable-thead-icon"></i>
                                        <i class="fas fa-angle-down datatable-thead-icon"></i>
                                      </div>
                                    </div>
                                  </th>
                                  <th scope="col" class="font-weight-medium">
                                    <div class="d-flex justify-content-between align-items-center">
                                      Amount
                                      <div class="ml-2">
                                        <i class="fas fa-angle-up datatable-thead-icon"></i>
                                        <i class="fas fa-angle-down datatable-thead-icon"></i>
                                      </div>
                                    </div>
                                  </th>
                                  <th scope="col" class="font-weight-medium">
                                    <div class="d-flex justify-content-between align-items-center">
                                      Date
                                      <div class="ml-2">
                                        <i class="fas fa-angle-up datatable-thead-icon"></i>
                                        <i class="fas fa-angle-down datatable-thead-icon"></i>
                                      </div>
                                    </div>
                                  </th>
                                  <th scope="col" class="font-weight-medium">
                                    <div class="d-flex justify-content-between align-items-center">
                                      Status
                                      <div class="ml-2">
                                        <i class="fas fa-angle-up datatable-thead-icon"></i>
                                        <i class="fas fa-angle-down datatable-thead-icon"></i>
                                      </div>
                                    </div>
                                  </th>
                                </tr>
                              </thead>
                              <tbody class="font-size-1">
                                <tr>
                                  <td class="align-middle text-body">FR001</td>
                                  <td>
                                    <span>Spotify</span>
                                  </td>
                                  <td class="align-middle text-primary">$9.00</td>
                                  <td class="align-middle text-body">05 May</td>
                                  <td class="align-middle text-danger">Rejected</td>
                                </tr>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                          <!-- Pagination -->
                          <div class="d-flex justify-content-between align-items-center">
                            <nav id="datatablePagination" aria-label="Activity pagination"></nav>
                            <small class="text-body">
                              Showing <span id="datatableWithPaginationInfoCurrentInterval"></span> of <span id="datatableWithPaginationInfoTotalQty"></span> entries
                            </small>
                          </div>
                          <!-- End Pagination -->
                        
                      

SCSS

SCSS-files of the component can be found here ../../assets/scss/front/vendor/datatable/

JavaScript behavior

Extend

By assigning a variable, you can call the standard methods of the plugin:

                  
                    <script>
                      $(document).on('ready', function () {
                        // initialization of datatables
                        $('.table').each(function () {
                          var datatable = $.HSCore.components.HSDatatables.init($(this));

                          datatable.on('draw', function () {
                            console.log('Table redrawn');
                          });
                        });
                      });
                    </script>
                  
                

Attributes

By assigning a variable, you can call the standard methods of the plugin:

                  
                    data-hs-datatables-options='{
                     ...

                     // Custom
                     "info": {
                       "currentInterval": "#ID",
                       "totalQty": "#ID",
                       "divider": " to "
                     },
                     "isSelectable": false,
                     "isColumnsSearch": false,
                     "isColumnsSearchTheadAfter": false,
                     "Pagination": "#ID",
                     "paginationClasses": "pagination",
                     "paginationLinksClasses": "page-link",
                     "paginationItemsClasses": "page-item",
                     "paginationPrevClasses": "page-item",
                     "paginationPrevLinkClasses": "page-link",
                     "paginationPrevLinkMarkup": "<span aria-hidden=\"true\">Prev</span>",
                     "paginationNextClasses": "page-item",
                     "paginationNextLinkClasses": "page-link",
                     "paginationNextLinkMarkup": "<span aria-hidden=\"true\">Next</span>",
                     "detailsInvoker": ".invoker",
                     "selectAllControl": "#ID"
                  }' - array
                  
                

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-circles-options='{}'. For more detailed or missing attributes/functions, see the official Datatables documentation page.

Parameters Description Default value

info.currentInterval

ID of the block in which the index of the first row visible in the table will be generated null

info.totalQty

ID of the block in which the index of the last row visible in the table will be generated null

info.divider

Index separator 'to'

isSelectable

If true, then includes the ability to select row by click, like a checkbox false

isColumnsSearch

If true, then includes a mode in which it is possible to filter individual columns false

isColumnsSearchTheadAfter

If true, it transfers the filter immediately after thead, otherwise it displays as tfoot false

pagination

ID of the block in which pagination will be generated null

paginationClasses

Pagination classes 'pagination'

paginationLinksClasses

Pagination links classes 'page-link'

paginationItemsClasses

Pagination items classes 'page-item'

paginationPrevClasses

Classes for the prev element 'page-item'

paginationNextClasses

Classes for the next element 'page-item'

paginationPrevLinkClasses

Classes for the link in the prev button 'page-link'

paginationNextLinkClasses

Classes for the link in the next button 'page-link'

paginationPrevLinkMarkup

prev button classes '<span aria-hidden="true">Prev</span>'

paginationNextLinkMarkup

next button classes '<span aria-hidden="true">Prev</span>'

detailsInvoker

Selector, clicking on which opens a detailed description null

selectAllControl

Selector, when clicked, all checkboxes become checked null
Contact Us