div
Since: DataTables 2.1
Text / HTML container.
Description
This feature doesn't provide table control or information itself, rather it provides an easy mechanism that you can use to place HTML or text around a table in the DataTables controlled layout grid.
Examples
Show text at the top of the table:
new DataTable('#myTable', {
layout: {
top: {
div: {
text: 'This is my DataTable!'
}
}
}
});Set text with an id and class:
new DataTable('#myTable', {
layout: {
topStart: {
div: {
className: 'warn',
id: 'warn-btn',
html: 'Click button to acknowledge: <button>Ack</button>'
}
}
}
});Add text after initialisation using a selector:
let table = new DataTable('#myTable', {
layout: {
top: {
div: {
id: 'dynamic'
}
}
}
});
// Wait for the table to be ready - allows this to work with DOM or Ajax loaded data
table.ready(() => {
let el = document.querySelect('#dynamic');
el.textContent = 'Dynamically updated';
});Related
The following options are directly related and may also be useful in your application development.