Как загрузить локальную переменную JSON, используя jquery datatable
У меня есть локальный набор данных JSON. Я хочу использовать jQuery datatable plugin для его отображения. Есть ли какая-либо настройка или конфигурация внутри плагина данных для отображения данных? Все, что я могу найти, это сделать вызовы AJAX и серверные вызовы.
Спасибо за помощь.
Ответы
Ответ 1
Вы можете снабжать DataTables данными 4 различными способами.
В вашей ситуации вы захотите использовать второй (Javascript Array) вариант. Вам нужно будет перевести форму вашего объекта JSON в объекты массива.
Здесь пример
var json = {
BrowserStats : [
{ engine: "Trident", browser: "IE 4.0", platform: "Win 95+", version: 4 },
{ engine: "Trident", browser: "IE 5.0", platform: "Win 95+", version: 5 },
{ engine: "Trident", browser: "IE 5.5", platform: "Win 95+", version: 5.5 }
]
};
var data = jQuery.map(json.BrowserStats, function(el, i) {
return new [el.engine, el.browser, el.platform, el.version];
});
$('#example').dataTable( {
"aaData": data,
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version"}
]
});
Ответ 2
Вы можете установить параметр AjaxSource, который указывает на ваш DataSet:
$('#example').dataTable( {
"sAjaxSource": 'dataset.json'
} );
Это будет загружать все данные один раз и помещать их в DataTable. Подробнее см. http://www.datatables.net/examples/data_sources/ajax.html.
Йован
Ответ 3
Вы можете получить локальный файл json, выполняющий обычный вызов ajax, с некоторыми оговорками (см. http://en.wikipedia.org/wiki/Same_origin_policy или jQuery's.getJSON с использованием локальных файлов перестает работать в Firefox 3.6.13, fwiw)
Но это определенно можно сделать:
$.getJSON('page.json', function(data) {
/* do something with each item in data */
});
Ответ 4
Используйте data
для предоставления данных для таблицы.
Например:
var table_data = [
[ "Tiger Nixon", "System Architect", "$3,120", "2011/04/25", "Edinburgh", 5421 ],
[ "Garrett Winters", "Director", "$8,422", "2011/07/25", "Edinburgh", 8422 ]
];
$('#example').DataTable( {
data: table_data
} );
Если ваши данные являются строкой в формате JSON, вы можете сначала ее проанализировать с помощью $.parseJSON()
или JSON.parse()
.
Смотрите этот jsFiddle для кода и демонстрации.
Ответ 5
Решение проблемы с jessegavin :
$(document).ready(function (){
var json = {
BrowserStats : [
{ engine: "Trident", browser: "IE 4.0", platform: "Win 95+", version: 4 },
{ engine: "Trident", browser: "IE 5.0", platform: "Win 95+", version: 5 },
{ engine: "Trident", browser: "IE 5.5", platform: "Win 95+", version: 5.5 }
]
};
var data = jQuery.map(json.BrowserStats, function(el, i) {
return [[el.engine, el.browser, el.platform, el.version]];
});
$('#example').dataTable( {
"aaData": data,
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version"}
]
});
});
https://jsfiddle.net/byejn8ye/