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:
Markup
<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
JavaScript
$("#datatable").DataTable();

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

Type URL
Plugin Link https://datatables.net/
Template Page https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-basic-initialization.html

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
Base style table https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-styling.html#base-style
No styling classes https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-styling.html#no-style
Base style - compact table https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-styling.html#compact-style
Bootstrap 3 table https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-styling.html#bootstrap3

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
DOM / jQuery events https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#dom
Column rendering https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#column
Multiple table control elements https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#multiple-table
Complex headers with column visibility table https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#complex-header
Language file table https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#language
Setting defaults table https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#language
Row grouping https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#row-grouping
Footer callback table https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#footer
Custom toolbar elements table https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#custom-toolbar
Row created callback https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#row-callback
File export table https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-advanced-initialization.html#file-export

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
Add rows https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-api.html#add-row
Individual column searching (text inputs) https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-api.html#text-inputs
Individual column searching (select inputs) https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-api.html#select-inputs
Child rows (show extra / detailed information) https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-api.html#child-row
Row selection (multiple rows) https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-api.html#row-selection
Row selection and deletion (single row) https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-api.html#selection-n-deletion
Form inputs table https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-api.html#form-inputs
Show & hide columns dynamically https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-api.html#show-hide-columns
Search API (regular expressions) table https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/dt-api.html#search-api