This repository was archived by the owner on May 30, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 78
Dynamically adding data
Karl edited this page Sep 3, 2017
·
26 revisions
New data of many formats can be added at any time with the insert() and import() methods as well as the rows() and columns() API.
You can quickly add a new row with an array of cell data:
var newRow = ["Cell 1", "Cell 2", "Cell 3", "Cell 4", ...];
datatable.rows().add(newRow);The add() method also accepts a nested array for adding multiple rows:
var newRows = [
["Cell 1", "Cell 2", "Cell 3", "Cell 4", ...],
["Cell 1", "Cell 2", "Cell 3", "Cell 4", ...],
["Cell 1", "Cell 2", "Cell 3", "Cell 4", ...],
["Cell 1", "Cell 2", "Cell 3", "Cell 4", ...],
...
];
datatable.rows().add(newRows);The insert() method can accept both an object or and array of key-value objects depending on your setup:
var newData = {
headings: ["Heading 1", "Heading 2", "Heading 3", "Heading 4", ...],
data: [
["Cell 1", "Cell 2", "Cell 3", "Cell 4", ...],
["Cell 5", "Cell 6", "Cell 7", "Cell 8", ...],
["Cell 9", "Cell 10", "Cell 11", "Cell 12", ...],
...
]
};
// or
var newData = [
{
"Heading 1": "Cell 1",
"Heading 2": "Cell 2",
"Heading 3": "Cell 3",
"Heading 4": "Cell 4",
},
{
"Heading 1": "Cell 5",
"Heading 2": "Cell 6",
"Heading 3": "Cell 7",
"Heading 4": "Cell 8",
}
];
// Insert the data
datatable.insert(newData);Note that while the key-value method doesn't require you to order the data correctly to match the table layout, the instance will still check that the given key (heading) is present and will skip the insertion if it isn't, so make sure the keys match the column labels.
JSON strings can easily be imported also:
"[{
'Heading 1': 'Value 1',
'Heading 2': 'Value 2',
'Heading 3': 'Value 3',
...
},
{
'Heading 1': 'Value 4',
'Heading 2': 'Value 5',
'Heading 3': 'Value 6',
...
}]"datatable.import({
type: "json",
data: // the above JSON string
});or csv strings:
Name,Ext.,City,Start Date
Hammett Gordon,8101,Wah,1998/06/09
Kyra Moses,3796,Quenast,1998/07/07
Kelly Cameron,4836,Fontaine-Valmont,1999/02/07
Theodore Duran,8971,Dhanbad,1999/04/07
...
datatable.import({
type: "csv",
data: // the above CSV string,
headings: true,
columnDelimiter: ",",
lineDelimiter: "\n"
});- 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