Как загрузить локальную переменную JSON, используя jquery datatable

Ответ 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"}
  ]
});

Ответ 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/