This repository has been 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