Datatables Documetation

Basic Initialization

DataTables is very simple to use as a jQuery plug-in with a huge range of customizable option.

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="jquery.dataTables.min.js"></script>
                    <script src="dataTables.bootstrap4.min.js"></script>
                    <link rel="stylesheet" type="text/css" href="dataTables.bootstrap4.min.css">
                
            
2. Call the DataTable-function after the page has loaded
                
                    $("#datatable").DataTable();
                
            

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://datatables.net/
Classic Basic Datatable https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-basic-initialization.html
Material Basic Datatable https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-basic-initialization.html

Advanced Initialization

DataTables combinations of the options available and the use of callbacks, DataTables is completely customizable and will fit into exactly what you need for your table display.

Refer following links for detailed documentation, configuration options, methods and examples:

Advance Examples URL
Classic DOM / jQuery events https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#dom
Material DOM / jQuery events https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-advanced-initialization.html#dom
Classic Column rendering https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#column
Material Column rendering https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-advanced-initialization.html#column
Classic Multiple table control elements https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#multiple-table
Material Multiple table control elements https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-advanced-initialization.html#multiple-table
Classic Complex headers with column visibility table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#complex-header
Material Complex headers with column visibility table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-advanced-initialization.html#complex-header
Classic Language file table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#language
Material Language file table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-advanced-initialization.html#language
Classic Setting defaults table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#language
Material Setting defaults table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-advanced-initialization.html#language
Classic Row grouping https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#row-grouping
Material Row grouping https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-advanced-initialization.html#row-grouping
Classic Footer callback table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#footer
Material Footer callback table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-advanced-initialization.html#footer
Classic Custom toolbar elements table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#custom-toolbar
Material Custom toolbar elements table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-advanced-initialization.html#custom-toolbar
Classic Row created callback https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#row-callback
Material Row created callback https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-advanced-initialization.html#row-callback
Classic File export table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#file-export
Material File export table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-advanced-initialization.html#file-export

Styling

DataTables provides an easy to customise core stylesheet, which has a number of features that you can enable or disable as you required. Additionally there are a number of integration packages which can be used to fit DataTables into a site which uses some of the popular CSS libraries

Refer following links for detailed documentation, configuration options, methods and examples:

Styling Examples URL
Classic Base style table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-styling.html#base-style
Material Base style table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-styling.html#base-style
Classic No styling classes https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-styling.html#no-style
Material No styling classes https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-styling.html#no-style
Classic Base style - compact table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-styling.html#compact-style
Material Base style - compact table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-styling.html#compact-style
Classic Bootstrap 3 table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-styling.html#bootstrap3
Material Bootstrap 3 table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-styling.html#bootstrap3

Data Source

Data Sources can be used and customized to display a printable version of the DataTable.

Refer following links for detailed documentation, configuration options, methods and examples:

Data Source Examples URL
Classic HTML (DOM) sourced data https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-data-sources.html#html
Material HTML (DOM) sourced data https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-data-sources.html#html
Classic Ajax sourced data https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-data-sources.html#ajax
Material Ajax sourced data https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-data-sources.html#ajax
Classic Javascript sourced data https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-data-sources.html#javascript
Material Javascript sourced data https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-data-sources.html#javascript
Classic Server-side processing https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-data-sources.html#server-processing
Material Server-side processing https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-data-sources.html#server-processing

API

The DataTables API is designed to be simple, consistent and easy to use. The examples in this section show how the API may be used.

Refer following links for detailed documentation, configuration options, methods and examples:

API Examples URL
Classic Add rows https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-api.html#add-row
Material Add rows https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-api.html#add-row
Classic Individual column searching (text inputs) https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-api.html#text-inputs
Material Individual column searching (text inputs) https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-api.html#text-inputs
Classic Individual column searching (select inputs) https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-api.html#select-inputs
Material Individual column searching (select inputs) https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-api.html#select-inputs
Classic Child rows (show extra / detailed information) https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-api.html#child-row
Material Child rows (show extra / detailed information) https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-api.html#child-row
Classic Row selection (multiple rows) https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-api.html#row-selection
Material Row selection (multiple rows) https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-api.html#row-selection
Classic Row selection and deletion (single row) https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-api.html#selection-n-deletion
Material Row selection and deletion (single row) https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-api.html#selection-n-deletion
Classic Form inputs table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-api.html#form-inputs
Material Form inputs table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-api.html#form-inputs
Classic Show & hide columns dynamically https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-api.html#show-hide-columns
Material Show & hide columns dynamically https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-api.html#show-hide-columns
Classic Search API (regular expressions) table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-api.html#search-api
Material Search API (regular expressions) table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-api.html#search-api

DataTable Extension

The features that DataTables provides can be greatly enhanced by the use of the plug-ins available on this page, which give many new user interaction and configuration options.

AutoFill

AutoFill adds an Excel like data fill option to DataTables, allowing click and drag over cells, filling in information and incrementing numbers as needed.

Refer following links:

Links Types URL
Plugin URL https://datatables.net/extensions/autofill/
Classic Autofill https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-extensions-autofill.html
Material Autofill https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-extensions-autofill.html

Buttons

The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. Modules are also provided for data export, printing and column visibility control.

Refer following links:

Links Types URL
Plugin URL https://datatables.net/extensions/buttons/
Classic Dt-Ext. Buttons Basic https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-extensions-buttons-basic.html
Material Dt-Ext. Buttons Basic https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-extensions-buttons-basic.html

Column Reorder

Fixed Columns

Key Table

KeyTable provides Excel like cell navigation on any table. Events (focus, blur, action etc) can be assigned to individual cells, columns, rows or all cells.

Refer following links:

Links Types URL
Plugin URL https://datatables.net/extensions/keytable/
Classic Key Table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-extensions-key-table.html
Material Key Table https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-extensions-key-table.html

Row Reorder

RowReorder adds the ability for rows in a DataTable to be reordered through user interaction with the table (click and drag / touch and drag). Integration with Editor's multi-row editing feature is also available to update rows immediately.

Refer following links:

Links Types URL
Plugin URL https://datatables.net/extensions/rowreorder/
Classic Row Reorder https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-extensions-row-reorder.html
Material Row Reorder https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-extensions-row-reorder.html

Select

Select adds item selection capabilities to a DataTable. Items can be rows, columns or cells, which can be selected independently, or together. Item selection can be particularly useful in interactive tables where users can perform some action on the table such as editing.

Refer following links:

Links Types URL
Plugin URL https://datatables.net/extensions/select/
Classic Select https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-extensions-select.html
Material Select https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-extensions-select.html

Fixed Header

The FixedHeader plug-in will freeze in place the header, footer and left and/or right most columns in a DataTable, ensuring that title information will remain always visible.

Refer following links:

Links Types URL
Plugin URL https://datatables.net/extensions/fixedheader
Classic Fix Header https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-extensions-fix-header.html
Material Fix Header https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-extensions-fix-header.html

Responsive

Responsive will automatically optimise the table's layout for different screen sizes through the dynamic column visibility control, making your tables useful on desktop and mobile screens.

Refer following links:

Links Types URL
Plugin URL https://datatables.net/extensions/responsive
Classic Datatable Responsive https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-extensions-responsive.html
Material Datatable Responsive https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-extensions-responsive.html

Columns Visibility

ColVis presents the end user with a list of columns in the table and options to enable or disable their current visibility.

Refer following links:

Links Types URL
Plugin URL https://datatables.net/extensions/colvis
Classic Column Visibility https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/dt-extensions-column-visibility.html
Material Column Visibility https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/dt-extensions-column-visibility.html