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.