logo
The World’s #1 Bootstrap 5 HTML,
VueJS, React, Angular, Laravel, Asp.Net Core, Blazor, Django & Flask

Admin Dashboard Ecosystem

This is Metronic 7 documentation!

Upon purchase you can get Metronic 7 version from our Github Repository.
Request Github access
The new Metronic 8 is now available with the most advanced Bootstrap 5, VueJS, React and Laravel foundation with a solid light and dark mode design system, extensive utility classes and custom made in-house components.
View Metronic 8 documentation

To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version. https://nodejs.org/en/

Datatable

Overview

KTDatatable is a Metronic's custom plugin defined in [metronic]/theme/html/[demo]/src/js/components/base/datatable/core.datatable.js.

In our demo templates we load the datatable records from keenthemes.com to simulate real datatable example with live data. When you open the theme in offline mode for the first time directly from the HTML the browser Chrome takes 8-10 seconds to load the datatable records from the server.

Initialization

Below code shows basic initialization of the datatable from element with attribute IDkt_datatable:

<div id="kt_datatable"></div>
var datatable = $('#kt_datatable').KTDatatable(options);

You can also init the datatable using the class name.

<div class="my_datatable" id="kt_datatable"></div>
var datatable = $('.my_datatable').KTDatatable(options);

The example KTDatatable init can be found in this directory; [metronic]/theme/html/[demo]/src/js/pages/crud/ktdatatable/*

The ID attribute is required for the datatable session state such as pagination, query, etc. Datatable save state can be disabled if it's not required.

Options

Field Type Description
data.type string Required. Set type to remote for remote data get public URL. local is for local data predefined in variable.
Sample
type: 'remote'
data.source.read.url string If data.type is defined as remote. Type of remote datasource can be static or dynamic. For the static datasource you can define static JSON file URL. And for dynamic datasource with pagination, sorting and filtering need to be defined as above sample. url is required, and params object is optional.
Sample
url: 'inc/api/datatables/demos/orders.php'
data.source.read.method string Request method for ajax request. The value can be GET or POST. The default value is POST.
Sample
method: 'GET'
data.source.read.headers object Headers parameter object will be sent along in the datatable API request headers.
Sample
headers: {
    'x-my-custom-header': 'some value',
    'x-test-header': 'the value'
},
data.source.read.contentType object Content type to be sent to the server. Default to application/x-www-form-urlencoded; charset=UTF-8
Sample
contentType: 'application/json',
data.source.read.params object Your own API may require some parameter to call for getting the data. E.g. token, search keywords, IDs, etc. This query parameters object will be sent along in the datatable API request.
Sample
params: {
  generalSearch: '',
  EmployeeID: 1
  token: 'tokenvalue'
}
data.source.read.map function Custom mapping the received data into datatable grid.
Sample
map: function(raw) {
  // sample data mapping
  var dataSet = raw;
  if (typeof raw.data !== 'undefined') {
	dataSet = raw.data;
  }
  return dataSet;
}
data.source.read.timeout number Number of milliseconds before the request ended. Default is 30000, equal to 30 seconds.
Sample
timeout: 30000
data.pageSize number Define page size of data for each request. Default value is 10.
Sample
pageSize: 10
data.saveState boolean Set true or false to enable/disable datatable state to save in localStorage. Default value is true.
data.serverPaging boolean Enable/disable pagination in server side. Only applied for the remote data.type.
Sample
serverPaging: true
data.serverFiltering boolean Enable/disable filtering in server side. Only applied for the remote data.type.
Sample
serverFiltering: true
data.serverSorting boolean Enable/disable sorting in server side. Only applied for the remote data.type.
Sample
serverSorting: true
data.autoColumns boolean Enable/disable auto create columns. By enabling this, the datatable will automatically create all available data in an object.
Sample
autoColumns: true
Layout
layout.theme string Define which class of theme to apply into datatable.
Sample
theme: 'default'
layout.class string Custom class to add into datatable.
Sample
class: 'datatable-brand'
layout.scroll boolean Enable/disable scroll.
Sample
scroll: true
layout.height string Define fixed height for the datatable.
Sample
height: 300
layout.footer boolean Enable/disable footer.
Sample
footer: false
layout.header boolean Enable/disable header.
Sample
header: false
layout.customScrollbar boolean Enable/disable custom scrollbar. Default is true.
Sample
customScrollbar: true
layout.minHeight number Set the datatable minimum height. Default is null.
Sample
minHeight: 500
layout.spinner.overlayColor string Spinner background overlay color.
Sample
overlayColor: '#000000'
layout.spinner.opacity number Spinner background opacity.
Sample
opacity: 0
layout.spinner.type string Spinner type.
Sample
type: 'loader'
layout.spinner.state string Spinner state style. Default to brand.
Sample
state: 'brand'
layout.spinner.message boolean
string
Enable/disable loading message during spinner is active. Set boolean or text string message.
Sample
message: true
message: 'Loading..'
layout.icons.sort object Options config for the icons class for sorting icon ascending and descending.
Sample
sort: {
  asc: 'la la-arrow-up',
  desc: 'la la-arrow-down'
}
layout.icons.pagination object Icons for pagination buttons.
Sample
pagination: {
  next: 'la la-angle-right',
  prev: 'la la-angle-left',
  first: 'la la-angle-double-left',
  last: 'la la-angle-double-right',
  more: 'la la-ellipsis-h'
}
layout.icons.rowDetail object rowDetail is for expand and collapse icon for table with child table.
Sample
rowDetail: {
  expand: 'fa fa-caret-down',
  collapse: 'fa fa-caret-right'
}
Others
sortable boolean Enable/disable columns sortable globally.
Sample
sortable: true
pagination boolean Enable/disable pagination globally.
Sample
pagination: true
search.onEnter boolean Set the search input keyup event to enter. The internal search will be triggered using Enter button. Set false to trigger search on keyup any buttons.
Sample
search: {
   onEnter: true,
},
search.input jQuery Pass the jQuery element of input. The datatable will add onKeyup event to the input to trigger the internal search filter the data that already in the table.
Sample
search: {
   input: $('#generalSearch'),
},
search.delay number Control the speed of search and data load request to reduce the search call frequency automatically. Default value is 400ms. Set the number of milliseconds.
Sample
search: {
  // search delay in milliseconds
  delay: 400,
},
Toolbar
toolbar.layout array Set the order of pagination and info by array index.
Sample
layout: ['pagination', 'info']
toolbar.placement array An array list of placement for pagination buttons. Can be multiple values. Set the pagination placement to bottom or top.
Sample
placement: ['bottom']
toolbar.items
.pagination.type
string Pagination type.
Sample
type: 'default'
toolbar.items
.pagination.pages.desktop
object Pagination pages responsive config for desktop. An object that contains layout and pagesNumber.
Default value for layout is default. Define pagesNumber to specify how many number of page for each responsive breakpoint.
Sample
desktop: {
  layout: 'default',
  pagesNumber: 6
}
toolbar.items
.pagination.pages.tablet
object Pagination pages responsive config for tablet. An object that contains layout and pagesNumber.
Default value for layout is default. Define pagesNumber to specify how many number of page for each responsive breakpoint.
Sample
tablet: {
  layout: 'default',
  pagesNumber: 3
}
toolbar.items
.pagination.pages.mobile
object Pagination pages responsive config for mobile. Default value for layout is compact. Layout compact type do not have to specify pagesNumber.
Sample
mobile: {
  layout: 'compact'
}
toolbar.items
.pagination.navigation
object Enable/disable pagination buttons for prev, next, first, last.
Sample
navigation: {
  prev: true,
  next: true,
  first: true,
  last: true
},
toolbar.items
.pagination.pageSizeSelect
array Array of Number for select size dropdown to select pagination size. -1 is used for "All" option.
Sample
pageSizeSelect: [10, 20, 30, 50, 100]
toolbar.items.info boolean Enable/disable display of records and pagination info.
Sample
info: true
Translate
translate.records.processing string Translation for records loading during spinner is active.
Sample
processing: 'Please wait...'
translate.records.noRecords string Translation for no records message.
Sample
noRecords: 'No records found'
translate.toolbar
.pagination.items.default
object Translation for pagination. Contains key for first, prev, next, last, more, input, select.
Sample
default: {
  first: 'First',
  prev: 'Previous',
  next: 'Next',
  last: 'Last',
  more: 'More pages',
  input: 'Page number',
  select: 'Select page size'
}
translate.toolbar
.pagination.items.info
string Translation for info template.
Sample
info: 'Displaying {{start}} - {{end}} of {{total}} records'
Detail
detail.title string Sub table title.
Sample
title: 'Load sub table'
detail.content object A callback function of Datatable instance as a sub table of each record. The callback has one parameter which you can access the row data event.data and child table element in event.detailCell.
Sample
content: function (event) {
}
Rows
rows object An array of columns with options object for each column. First column should be define as a unique key for each records.
rows.callback string Row callback. Deprecated in v5.0.6 Use rows.beforeTemplate instead.
Sample
callback: function (row, data, index) {
}
rows.beforeTemplate string Row callback that call before template being rendered. Receive 3 params which are the row jQuery element, the row data and row number index.
Sample
beforeTemplate: function (row, data, index) {
}
rows.afterTemplate string Row callback that call after rows has been rendered. Receive 3 params which are the row jQuery element, the row data and row number index.
Sample
afterTemplate: function (row, data, index) {
}
rows.autoHide boolean Auto hide columns which are overflow in a row for the responsive mode. By default is enabled.
Sample
autoHide: true,
Columns
columns array An array of columns with options object for each column. First column should be define as a unique key for each records.
columns[ColName].field string Required. The field name of column.
Sample
field: 'ColumnName'
columns[ColName].title string Required. The title name and will be displayed as header or footer.
Sample
title: 'Column Name'
columns[ColName].sortable boolean Enable/disable sort feature for the column.
Sample
sortable: false
columns[ColName].width number The width size of cells under this column.
Sample
width: 40
columns[ColName].textAlign string The alignment of cells text under this column.
Sample
textAlign: 'center'
columns[ColName].template function
string
A callback function support for column rendering and recieve a parameter object of current row's value. Can be also a string with placeholder and define with field name {{field}}.
Sample
template: function (row) {
  return '' + row.OrderID + '';
}
template: '{{OrderID}}'
columns[ColName].sortCallback function
string
A callback function support for custom sorting.
Input Parameters
Name Type Description
data object JSON string array of original data for sorting
sort string Sorting type of asc for ascending or desc for descending.
column object Column config object
Sample
sortCallback: function (data, sort, column) {
    var field = column['field'];
    return $(data).sort(function (a, b) {
        var aField = a[field];
        var bField = b[field];
        if (sort === 'asc') {
            return parseFloat(aField) > parseFloat(bField)
                ? 1 : parseFloat(aField) < parseFloat(bField)
                    ? -1
                    : 0;
        } else {
            return parseFloat(aField) < parseFloat(bField)
                ? 1 : parseFloat(aField) > parseFloat(bField)
                    ? -1
                    : 0;
        }
    });
}
columns[ColName].overflow string CSS overflow value.
Sample
overflow: 'visible'
columns[ColName].responsive object Set visible or invisible for each responsive breakpoint.
Sample
responsive: {
  visible: 'md',
  hidden: 'lg'
}
columns[ColName].selector object Enable column as selector (checkbox only with no text) and provide custom class name.
`
Sample
selector: {
  class: 'kt-checkbox--solid'
}
columns[ColName].autoHide boolean When rows.autoHide option is enabled, by default all overflowing columns will be hidden in the details row. Set this option to false, to force this column from being hidden.
Sample
autoHide: false

Events

Method Description
datatable-on-init Initialization of table.
Input Parameters
Name Type Description
event object Default event object.
options object Datatable ID and initialized options.
datatable-on-destroy On datatable destroyed.
Input Parameters
Name Type Description
event object Default event object.
datatable-on-layout-updated Event that will be triggered on layout rendering update and resizing datatable.
Input Parameters
Name Type Description
event object Default event object.
args object Provide table parameters, eg. datatable ID attribute
datatable-on-ajax-done After ajax request is completed.
Input Parameters
Name Type Description
event object Default event object.
data object List of all records.
datatable-on-ajax-fail Ajax request is failed.
Input Parameters
Name Type Description
event object Default event object.
jqXHR object jQuery XMLHttpRequest from jQuery request, include error details.
datatable-on-goto-page Navigate to any page number.
Input Parameters
Name Type Description
event object Default event object.
args object Page details.
datatable-on-update-perpage Update page size.
Input Parameters
Name Type Description
event object Default event object.
args object Page details.
datatable-on-reloaded Reload datatable.
Input Parameters
Name Type Description
event object Default event object.
datatable-on-check On check checkbox selector.
Input Parameters
Name Type Description
event object Default event object.
args object Checked records details.
datatable-on-uncheck On uncheck checkbox selector.
Input Parameters
Name Type Description
event object Default event object.
args object Unchecked records details.
datatable-on-sort Sorting datatable.
Input Parameters
Name Type Description
event object Default event object.
args object Sorting details. Eg. field and sort type of asc or desc.

API Methods

Method Description
datatable.load() Load datatable datasource. Same function with datatable.reload().
datatable.reload() Reload datatable datasource and rerender the table.
datatable.destroy() Destroy the datatable instance and revert the HTML.
datatable.getRecord(id) Select record in the datatable by ID. ID is refers to the value of first column. Use with chaining methods datatable.getColumn(columnName)
Input Parameters
Name Type Description
id string ID is refers to the first columns value of each rows.
datatable.getColumn(columnName) Get column by column name. Use with chaining methods datatable.getValue() to get a cell value.
Input Parameters
Name Type Description
columnName string Column name as defined in datatable options init columns[ColName].field
datatable.getValue() Get selected records values as string.
Returns
string
Sample
datatable.getRecord(1).getColumn('columnName').getValue();
datatable.sort(columnName, sort) Sort datatable by columnName field. Sort by ascending or descending.
Input Parameters
Name Type Description
columnName string Column name as defined in datatable options init columns[ColName].field
sort string Sort type to ascending or descending, can accept value asc and desc.
datatable.setActive(cell) Set datatable selector checkbox to active state.
Input Parameters
Name Type Description
cell string Cell is a string of selector checkbox value.
datatable.setInactive(cell) Set datatable selector checkbox to inactive state.
Input Parameters
Name Type Description
cell string Cell is a string of checkbox value.
datatable.setActiveAll(active) Set datatable selector checkbox active/inactive for all records.
Input Parameters
Name Type Description
active boolean Set records selector active or inactive state by pass the boolean true or false.
datatable.setSelectedRecords()

Deprecated in v5.0.6

Set selected selector checkbox.
datatable.getSelectedRecords() Get selected records.
Returns
jQuery element of selected record rows.
datatable.search(value, column) Execute search method to filter datatable records.
Input Parameters
Name Type Description
value string Value to filter.
column string Column field name which defined in options config.
datatable.setDataSourceParam(param, value) Modify the datasource parameters and save it in datatable state. Must be call datatable.load() to load new modified datasource and rerender table.
Input Parameters
Name Type Description
param string Param key value. Can accept pagination, sort, query.
value string The string value of param.
datatable.getDataSourceParam(param) Get current datasource parameters by param type of pagination, sort, or query.
Input Parameters
Name Type Description
param string Param key value. Can accept pagination, sort, query.
datatable.getDataSourceQuery() A helper function shortcut to datatable.getDataSourceParam('query'). Get current query datasource parameter.
Returns
{
  pagination: {
    field: "ShipDate",
    page: 1,
    pages: 18,
    perpage: 20,
    sort: "asc",
    total: 350
  },
  query: {
  },
  sort: {
    sort: "asc",
    field: "ShipDate"
  }
}
datatable.getCurrentPage() Get current selected page number
Returns
number
datatable.getPageSize() Get current selected page size number.
Returns
number
datatable.getTotalRows() Get total rows of record.
Returns
number
datatable.hideColumn(columnName)

Deprecated in v5.0.6

Hide column by column's field name.
Input Parameters
Name Type Description
fieldName string Field name of the column defined in initialized options.
datatable.showColumn(columnName)

Deprecated in v5.0.6

Show column by column's field name.
Input Parameters
Name Type Description
fieldName string Field name of the column defined in initialized options.
datatable.table() Return the jQuery element of the table
datatable.row(selector) Select a single row from the table by css selector. The method return datatable instance.
Input Parameters
Name Type Description
selector string Class name, id attribute or tag name.
datatable.rows(selector) Select multiple rows from the table by css selector. The method return datatable instance.
Input Parameters
Name Type Description
selector string Class name, id attribute or tag name.
datatable.column(index) Select a single column from the table index. The method return datatable instance.
Input Parameters
Name Type Description
index number Zero-based index number.
datatable.columns(selector) Select multiple columns from the table by css selector. The method return datatable instance.
Input Parameters
Name Type Description
selector string Class name, id attribute or tag name.
datatable.remove() Delete selected a single row or multiples rows.
Can be used after selector methods row(selector) or rows(selector).
datatable.visible(visibility) Set the visibility of selected rows or columns.
Can be used after selector methods row(selector) or rows(selector).
Input Parameters
Name Type Description
visibility boolean Set true to visible, and false to hide.
datatable.nodes() Return nodes of the selected rows or columns.
Can be used after selector methods row(selector) or rows(selector).

Ajax Response

Below is the sample ajax response from back-end for the remote source datatable.

{
    "meta": {
        "page": 1,
        "pages": 35,
        "perpage": 10,
        "total": 350,
        "sort": "asc",
        "field": "ShipDate"
    },
    "data": [
        {
            "RecordID": 10,
            "OrderID": "55154-5393",
            "ShipCountry": "NG",
            "ShipCity": "Sapele",
            "ShipName": "Moen, Kertzmann and Mills",
            "ShipAddress": "1 Nancy Junction",
            "CompanyEmail": "epere9@sina.com.cn",
            "CompanyAgent": "Ely Pere",
            "CompanyName": "Jacobi, O'Conner and Kuhlman",
            "Currency": "NGN",
            "Notes": "adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula",
            "Department": "Shoes",
            "Website": "whitehouse.gov",
            "Latitude": 5.8750769,
            "Longitude": 5.6931356,
            "ShipDate": "1\/1\/2016",
            "PaymentDate": "2017-06-20 10:42:35",
            "TimeZone": "Africa\/Lagos",
            "Status": 3,
            "Type": 1,
            "TotalPayment": "88,211.68 NGN"
        },
        {
            "RecordID": 263,
            "OrderID": "43406-0032",
            "ShipCountry": "US",
            "ShipCity": "Fort Pierce",
            "ShipName": "Moore-Schaden",
            "ShipAddress": "451 Fuller Junction",
            "CompanyEmail": "tdefau7a@google.pl",
            "CompanyAgent": "Tristan Defau",
            "CompanyName": "Mayer and Sons",
            "Currency": "USD",
            "Notes": "mauris enim leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus",
            "Department": "Music",
            "Website": "cornell.edu",
            "Latitude": 27.3980151,
            "Longitude": -80.3714326,
            "ShipDate": "1\/1\/2017",
            "PaymentDate": "2017-05-21 01:45:57",
            "TimeZone": "America\/New_York",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "7,105.23 USD"
        },
        {
            "RecordID": 77,
            "OrderID": "68016-527",
            "ShipCountry": "PH",
            "ShipCity": "Batarasa",
            "ShipName": "Gibson Inc",
            "ShipAddress": "948 Roxbury Center",
            "CompanyEmail": "smatitiaho24@dailymotion.com",
            "CompanyAgent": "Skippy Matitiaho",
            "CompanyName": "Monahan, Haley and Murphy",
            "Currency": "PHP",
            "Notes": "sit amet consectetuer adipiscing elit proin risus praesent lectus vestibulum quam sapien varius",
            "Department": "Jewelery",
            "Website": "printfriendly.com",
            "Latitude": 8.5015747,
            "Longitude": 117.3557854,
            "ShipDate": "1\/12\/2017",
            "PaymentDate": "2016-09-07 16:34:55",
            "TimeZone": "Asia\/Manila",
            "Status": 1,
            "Type": 3,
            "TotalPayment": "9,541.82 PHP"
        },
        {
            "RecordID": 330,
            "OrderID": "54868-5303",
            "ShipCountry": "PH",
            "ShipCity": "Sillon",
            "ShipName": "Balistreri Group",
            "ShipAddress": "8203 Truax Center",
            "CompanyEmail": "kvickarman95@storify.com",
            "CompanyAgent": "Kipp Vickarman",
            "CompanyName": "Kerluke and Sons",
            "Currency": "PHP",
            "Notes": "lobortis ligula sit amet eleifend pede libero quis orci nullam molestie",
            "Department": "Clothing",
            "Website": "vkontakte.ru",
            "Latitude": 11.186148,
            "Longitude": 123.7487563,
            "ShipDate": "1\/14\/2017",
            "PaymentDate": "2017-05-16 18:29:45",
            "TimeZone": "Asia\/Manila",
            "Status": 6,
            "Type": 1,
            "TotalPayment": "8,300.97 PHP"
        },
        {
            "RecordID": 51,
            "OrderID": "49884-659",
            "ShipCountry": "ID",
            "ShipCity": "Atap",
            "ShipName": "Blanda Group",
            "ShipAddress": "1 Monica Alley",
            "CompanyEmail": "sjackes1e@reuters.com",
            "CompanyAgent": "Shelagh Jackes",
            "CompanyName": "Schiller Inc",
            "Currency": "IDR",
            "Notes": "iaculis justo in hac habitasse platea dictumst etiam faucibus cursus",
            "Department": "Jewelery",
            "Website": "forbes.com",
            "Latitude": 3.8152026,
            "Longitude": 117.1147095,
            "ShipDate": "1\/15\/2016",
            "PaymentDate": "2016-06-24 03:01:19",
            "TimeZone": "Asia\/Makassar",
            "Status": 2,
            "Type": 1,
            "TotalPayment": "8,397.18 IDR"
        },
        {
            "RecordID": 313,
            "OrderID": "23155-179",
            "ShipCountry": "PA",
            "ShipCity": "Potrero Grande",
            "ShipName": "Olson, Schmeler and Little",
            "ShipAddress": "3 Bartillon Place",
            "CompanyEmail": "cgrandison8o@auda.org.au",
            "CompanyAgent": "Corliss Grandison",
            "CompanyName": "Mills-Beatty",
            "Currency": "PAB",
            "Notes": "egestas metus aenean fermentum donec ut mauris eget massa tempor convallis nulla neque libero convallis eget eleifend",
            "Department": "Clothing",
            "Website": "mlb.com",
            "Latitude": 8.881634,
            "Longitude": -79.8268729,
            "ShipDate": "1\/16\/2016",
            "PaymentDate": "2017-12-06 10:30:59",
            "TimeZone": "America\/Panama",
            "Status": 3,
            "Type": 2,
            "TotalPayment": "85,706.89 PAB"
        },
        {
            "RecordID": 153,
            "OrderID": "53341-515",
            "ShipCountry": "MD",
            "ShipCity": "Saharna",
            "ShipName": "Leffler, Sawayn and Denesik",
            "ShipAddress": "07247 Del Sol Hill",
            "CompanyEmail": "fshank48@spotify.com",
            "CompanyAgent": "Findley Shank",
            "CompanyName": "Reilly LLC",
            "Currency": "MDL",
            "Notes": "dui nec nisi volutpat eleifend donec ut dolor morbi vel lectus in quam fringilla rhoncus mauris enim leo",
            "Department": "Industrial",
            "Website": "discuz.net",
            "Latitude": 47.6949791,
            "Longitude": 28.9654659,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2017-01-05 15:53:50",
            "TimeZone": "Europe\/Chisinau",
            "Status": 6,
            "Type": 1,
            "TotalPayment": "993,295.17 MDL"
        },
        {
            "RecordID": 112,
            "OrderID": "50580-198",
            "ShipCountry": "PT",
            "ShipCity": "Loureiro",
            "ShipName": "Labadie, Hegmann and Jones",
            "ShipAddress": "9986 Arapahoe Place",
            "CompanyEmail": "bglaister33@bbb.org",
            "CompanyAgent": "Baxie Glaister",
            "CompanyName": "Stark, Haley and Koepp",
            "Currency": "EUR",
            "Notes": "suspendisse potenti in eleifend quam a odio in hac habitasse platea dictumst maecenas",
            "Department": "Tools",
            "Website": "apple.com",
            "Latitude": 41.4808684,
            "Longitude": -8.3624629,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2016-04-24 01:53:42",
            "TimeZone": "Europe\/Lisbon",
            "Status": 3,
            "Type": 3,
            "TotalPayment": "9,705.78 EUR"
        },
        {
            "RecordID": 29,
            "OrderID": "30142-106",
            "ShipCountry": "RU",
            "ShipCity": "Loukhi",
            "ShipName": "Klein-Streich",
            "ShipAddress": "61 Cascade Plaza",
            "CompanyEmail": "mgallamores@businesswire.com",
            "CompanyAgent": "Minor Gallamore",
            "CompanyName": "Huels-Strosin",
            "Currency": "RUB",
            "Notes": "sollicitudin ut suscipit a feugiat et eros vestibulum ac est lacinia nisi venenatis tristique",
            "Department": "Beauty",
            "Website": "epa.gov",
            "Latitude": 66.0733463,
            "Longitude": 33.0544476,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2016-03-09 04:40:38",
            "TimeZone": "Europe\/Moscow",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "931,956.17 RUB"
        },
        {
            "RecordID": 135,
            "OrderID": "49348-387",
            "ShipCountry": "FR",
            "ShipCity": "Sens",
            "ShipName": "Collins, Hackett and Vandervort",
            "ShipAddress": "594 Hanover Crossing",
            "CompanyEmail": "tkiezler3q@live.com",
            "CompanyAgent": "Tommy Kiezler",
            "CompanyName": "Eichmann and Sons",
            "Currency": "EUR",
            "Notes": "etiam faucibus cursus urna ut tellus nulla ut erat id mauris vulputate elementum nullam varius nulla facilisi",
            "Department": "Toys",
            "Website": "instagram.com",
            "Latitude": 48.1903349,
            "Longitude": 3.2995005,
            "ShipDate": "1\/18\/2017",
            "PaymentDate": "2016-12-28 03:56:57",
            "TimeZone": "Europe\/Paris",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "811,814.44 EUR"
        }
    ]
}
Field Type Description
meta object Meta object should contain the metadata that required for the datatable pagination to work.
meta.page number The current page number.
meta.pages number Total number of pages available in the server.
meta.perpage number Total records per page.
meta.total number Total all records number available in the server
meta.sort string Sort type asc for ascending and desc for descending.
meta.field string Field name which the sort should be applied to.
data array Array of objects.

Extensions

The datatable can be enhanced by extensions, which give new user interaction and configuration options.
Checkbox
Checkbox extension is use for the checkbox selector logic. Below is the default options.
var datatableOptions = {
   ...
   extensions: {
      checkbox: {
         vars: {
           selectedAllRows: 'selectedAllRows',
           requestIds: 'requestIds',
           rowIds: 'meta.rowIds',
         },
      },
   }
   ...
};
Field Type Description
vars.selectedAllRows string Flag params for selected all rows, to be sent to the server in the request.
vars.requestIds string Enable to request the all rows IDs from server.
vars.rowIds string Response path for all rows IDs in the server response.
Think About The Future, Stay Connected With Us
The More We Learn, The More We Are Able To Innovate & To Develop