我需要从JSON数据创建一个2D数组,用于jQuery的数据插件。表

时间:2017-04-01 22:49:13

标签: jquery arrays datatables

我的2D testtable数组按预期填充表中的行。 我从JSON数据创建的tabledata数组创建了一个数组,但不会填充表中的行。出于某种原因,似乎Datatables不会将数组识别为数组。控制台中没有错误。只是表格中的一条消息说明"表格中没有可用的数据"。我感到困惑,因为tabledata数组应该有效。任何想法为什么它没有。我试着用其他几种方法创建tabledata数组,但没有运气。

var tableData = [];
var testTable = [['1','2','3','4','5','6'], ['7','8','9','10','11','12']]

$(function() {
    populateTableDataArray('data/test.json');
    $('#example').DataTable({
        data: tableData
    });
    console.log(tableData);
});

function populateTableDataArray(file) {
    $.getJSON(file, function(data) {
        $.each(data, function(key, value) {
            tableData.push([value[0], value[1], value[2], value[6], value[7], value[8]]);
        });
    });
};

测试JSON数据

{"1": ["4999", "HARVEST MARKET", "2285 MARKET St", "San Francisco", "37.764607", "-122.432452", "2016-10-03T00:00:00", "77", "High risk food holding temperature", "High Risk"], "2": ["2134", "CHIEFTAIN IRISH PUB, THE", "198 05th St", "San Francisco", "37.781567", "-122.405059", "2016-11-09T00:00:00", "87", "High risk food holding temperature", "High Risk"]}

使用tabledata数组从Datatables输出 Output from Datatables using tabledata array

使用testtable array

从Datatables输出

op from db using testtable

1 个答案:

答案 0 :(得分:1)

正如 charlietf 所提到的,问题是异步性。一个快速的解决方法可能是从dataTables本身加载JSON,然后在populateTableDataArray()回调中重用dataSrc中的代码:

$('#example').DataTable({
   ajax: {
     url: 'https://api.myjson.com/bins/1dtiov',
     dataSrc: function(data) {
       var tableData = [];
       $.each(data, function(key, value) {
         tableData.push([value[0], value[1], value[2], value[6], value[7], value[8]]);
       });
       return tableData
     }
   },
   columns: [
     { data: 0, title: '1'}, //TODO, add some meaningful titles
     { data: 1, title: '2'},
     { data: 2, title: '3'},
     { data: 3, title: '4'},
     { data: 4, title: '5'}    
   ]
})  

标记

<table id="example"></table>

在行动中看到它 - &gt;的 http://jsfiddle.net/yzrshckf/

将myjson.com引用替换为JSON的路径,即data/test.json