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.

Datatables documentation

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

              
                <script src="../node_modules/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/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
                    var datatable = $.HSCore.components.HSDatatables.init($('#datatable'));
                  });
                </script>

Basic example

With pagination

Example with entries:

With filter

Checkbox select

Date picker filter

Column show/hide

Drag' n' drop

Export options

Column fixed

Header with fixed height

Collapsible rows

Methods

Parameters Description Default value
paging Enable pagination. true
info.currentInterval Pages interval info template. null
info.divider Divider for current interval. Example: Showing 1 to 10 of 24 entries. "to"
pagination Pagination template. null
paginationClasses Pagination class. pagination
paginationLinksClasses Pagination links classes. page-link
paginationItemsClasses Pagination items classes. page-item
paginationPrevLinkClasses Pagination previous class. page-item
paginationPrevLinkClasses Pagination previous link class. page-link
paginationNextClasses Pagination next class. page-item
paginationNextLinkClasses Pagination next link class. page-link
paginationPrevLinkMarkup Pagination previous template. <span aria-hidden="true">Prev</span>
paginationNextLinkMarkup Pagination next template. <span aria-hidden="true">Next</span>