-
Notifications
You must be signed in to change notification settings - Fork 78
columns
Controls various aspects of individual or groups of columns. Should be an array of objects with the following properties:
An integer or array of integers representing the column(s) to be manipulated.
Automatically sort the selected column. Can only be applied if a single column is selected.
When set to false
the column(s) cannot be sorted.
When set to true
the column(s) will not be visible and will be excluded from search results.
A string
reperesenting the type of data in the column(s) cells. Choose from the following options:
-
string
- lexical ordering (default) -
number
- anystring
with currency symbols,.
or,
thousand seperators,%
, etc -
date
- a validdatetime
string
A string representing the datetime
format when using the date
type.
A callback to customise the rendering of the column(s) cell content. The function takes 3 parameters and should return the formatted cell content.
/**
* @param {String} data The cell's content (innerHTML)
* @param {Object} cell The HTMLTableCellElement
* @param {Object} row The cell's parent HTMLTableRowElement
*/
render: function(data, cell, row) {
}
var datatable = new DataTable("#myTable", {
columns: [
// Sort the second column in ascending order
{ select: 1, sort: "asc" },
// Set the third column as datetime string matching the format "DD/MM/YYY"
{ select: 2, type: "date", format: "DD/MM/YYYY" },
// Disable sorting on the fourth and fifth columns
{ select: [3,4], sortable: false },
// Hide the sixth column
{ select: 5, hidden: true },
// Append a button to the seventh column
{
select: 6,
render: function(data, cell, row) {
return data + "<button type='button' data-row='" + row.dataIndex + "'>Select</button>";
}
}
]
});
You can use the same properties in your markup. Just add the property to the th
element as a data-{property}
attribute:
<table>
<thead>
<th data-sortable="false">Heading 1</th>
<th data-type="date" data-format="MMM DD, YYYY">Heading 2</th>
<th data-hidden="true">Heading 3</th>
...
</thead>
...
</table>
- datatable.init
- datatable.refresh
- datatable.update
- datatable.page
- datatable.sort
- datatable.perpage
- datatable.search
- perPage
- perPageSelect
- nextPrev
- prevText
- nextText
- firstLast
- firstText
- lastText
- searchable
- sortable
- truncatePager
- fixedColumns
- fixedHeight
- columns
- data
- ajax
- labels
- layout
- header
- footer
- table
- head DEPRECATED
- body DEPRECATED
- foot DEPRECATED
- wrapper
- container
- pagers
- headings
- options DEPRECATED
- initialized
- isIE DEPRECATED
- data
- activeRows DEPRECATED
- dataIndex
- pages
- hasRows
- hasHeadings
- currentPage
- totalPages
- onFirstPage
- onLastPage
- searching
- searchData