Как загрузить локальную переменную JSON с помощью JQuery Datatable

Question

У меня есть локальный набор данных JSON. Я хочу использовать jquery datatable плагин для его отображения. Есть ли какие-либо настройки или конфигурации внутри подключаемого модуля для отображения данных? Все, что я могу найти, это совершать AJAX-звонки и звонки на сервер.

Спасибо за помощь.

Answer 1

Вы можете предоставить DataTables данными 4 различными способами

• DOM
• массив Javascript
• Источник Ajax
• Обработка на стороне сервера

В вашей ситуации вы захотите использовать второй вариант (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"}
  ]
});

Answer 2

Решение проблемы с 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/

Answer 3

Вы можете установить параметр AjaxSource, который указывает на ваш DataSet:

$('#example').dataTable( {
    "sAjaxSource": 'dataset.json'
} );

Это загрузит все данные один раз и поместит их в DataTable.Подробнее о http://www.datatables.net/examples/data_sources/ajax.html.

Jovan

Answer 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 для кода и демонстрации.

Answer 5

Вы можете получить локальный файл json, выполняя обычный ajax-вызов, с некоторыми оговорками (см. http://en.wikipedia.org/wiki/Same_origin_policy, или .getJSON jQuery, использующий локальные файлы, которые перестали работать в Firefox 3.6.13 , fwiw)

Но это определенно должно быть возможно сделать:

$.getJSON('page.json', function(data) {
    /* do something with each item in data */
});