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://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/dt-basic-initialization.html |
| Material Basic Datatable | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/dt-basic-initialization.html |
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:
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:
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:
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:
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 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:
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://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/dt-extensions-buttons-basic.html |
| Material Dt-Ext. Buttons Basic | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/dt-extensions-buttons-basic.html |
ColReorder allows the end user to modify the column order of a table through drop-and-drag of column headers.
Refer following links:
| Links Types | URL |
|---|---|
| Plugin URL | https://datatables.net/extensions/colreorder/ |
| Classic Column Reorder | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/dt-extensions-column-reorder.html |
| Material Column Reorder | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/dt-extensions-column-reorder.html |
Fixed Columns "freezes" in place the left most columns in a scrolling DataTable, to provide a guide to the end user
Refer following links:
| Links Types | URL |
|---|---|
| Plugin URL | https://datatables.net/extensions/fixedcolumns/ |
| Classic Fixed Columns | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/dt-extensions-fixed-columns.html |
| Material Fixed Columns | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/dt-extensions-fixed-columns.html |
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:
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:
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:
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:
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://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/dt-extensions-responsive.html |
| Material Datatable Responsive | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/dt-extensions-responsive.html |
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://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/dt-extensions-column-visibility.html |
| Material Column Visibility | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/dt-extensions-column-visibility.html |