API - Mobius1/Vanilla-DataTables GitHub Wiki

Please note that the API is not finalised and may change so check back once in while.

Returns a reference to the HTMLTableElement.

Returns a reference to the HTML <thead> element.

Returns a reference to the HTML <tbody> element.

Returns a reference to the HTML <tfoot> element.

Returns a reference to the main HTMLDivElement that wraps the entire layout.

Returns a reference to the main HTMLDivElement that contains the table.

Returns a reference to the currently displayed pagers.

Returns a live HTMLCollection of the the table headings.

Returns the current configuration options.

Returns true if the library is fully loaded and all HTML is rendered.

Returns true if the current browser is a version of MS Internet Exporer or MS Edge.

Returns a collection of all HTMLTableRowElements in the table.

All rows in the data array have a custom propery named dataIndex. This represents the position in the data array. It can be useful for getting the correct position of a row as the native rowIndex property may be either -1 if the row isn't rendered or incorrect if you're on any other page than page 1.

Also, in some browsers, the first row of a tbody element will have a rowIndex of 1 instead of 0 as they take the thead row as the first row.

For example if you want to remove the first row on page 5 while showing 5 rows per page (21st row):

// grab the first row on page 5
var firstRow = document.querySelector("tr");

// INCORRECT: Because it's the first rendered row the native firstRow.rowIndex
// will be 1 which will remove the second row in the data array
datatable.rows().remove(firstRow.rowIndex);

// CORRECT: firstRow.dataIndex will return 20 which is the
// correct position (21st row) in the data array
datatable.rows().remove(firstRow.dataIndex);

The activeRows property is similar to the data property in that it contains all rows of the current instance, but it takes into account the number of hidden columns as well.

Let's say you have 5 columns in your table and you've chosen to hide columns 2 and 5 and you want the 4th row:

// returns [Willow Gilliam, 3497, Amqui, 2009/29/11, 30%]
var row = [].slice.call(datatable.data[3].cells).map(function(cell) { return cell.textContent; });

// returns [Willow Gilliam, Amqui, 2009/29/11]
var row = [].slice.call(datatable.activeRows[3].cells).map(function(cell) { return cell.textContent; });

Returns a collection of pages each of which contain collections of HTMLTableRowElements.

Returns true if the current table has rows.

Returns true if the current table has headings.

Returns the current page number.

Returns then number of pages.

Returns true if the current page is also the first page.

Returns true if the current page is also the last page.

Returns true if a search is currently being done and search results are displayed.

Returns a collection of HTMLTableRowElements containing matching results.