-
Notifications
You must be signed in to change notification settings - Fork 873
Set Table Data
Tabulator row data is defined as an array of objects, that can either be passed as an array or retrieved as a JSON formatted string via AJAX from a URL.
The data can contain more columns that are defined in the columns options, these will be stored with the rest of the data, but not rendered to screen.
an example JSON data set:
[
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
{id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
{id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
{id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:7, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
{id:8, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
{id:9, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
{id:10, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
]###Row Index A unique numerical index value must be present for each row of data. By default Tabulator will look for this value in the id field for the data. If you wish to use a different field as the index, set this using the index option parameter.
$("#example-table").tabulator({
index:"age", //set the index field to the "age" field.
});If the index is missing from the provided data, tabulator will generate one from the position of the data in the original array.
###Set data using array You can pass an array directly to the table using the setData method.
$("#example-table").tabulator("setData",[
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
]);###Set data using AJAX If you wish to retrieve your data from a remote source, pass the URL to the setData method and it will perform the AJAX request for you. The URL can be absolute or relative.
$("#example-table").tabulator("setData","http://www.getmydata.com/now");Data must be provided in the form of a JSON formatted array of objects.
If you always request the same url for your data then you can set it in the ajaxURL option when you create your Tabulator
$("#example-table").tabulator({
ajaxURL:"http://www.getmydata.com/now",
});and call setData to refresh the data at any point
$("#example-table").tabulator("setData");