Question

I have DataTables working just fine - but I'd like to use my JSON return to populate two separate tables.

The JSON that is returned from PHP contains 10 objects:

[[8,34,784,421,"30.77%","1.90%",26,8,95737,1121742]]

and my javascript code handles the first 8:

$.fn.dataTable.ext.errMode = 'throw';
$('#qtw-graph-table').DataTable( {
  data: dataParse,
  },
  columns: [            
    { title: "a"},
    { title: "b"},
    { title: "c"},
    { title: "d"},
    { title: "e"},
    { title: "f"},
    { title: "g"}
  ]
});

I'd like to separate the a - g and h - i into two separate tables, but I can't figure out how to get a second table to use ONLY the last two elements in the JSON object 95737,1121742 in the output above...

How do?

Answer 1

<强>解

您可以使用columns.data选项为每个数据指定数组索引。

var dataParse = [
    [8, 34, 784, 421, "30.77%", "1.90%", 26, 8, 95737, 1121742]
];

$('#qtw-graph-table1').DataTable({
    data: dataParse,
    columns: [{
        data: 0, title: "a"
    }, {
        data: 1, title: "b"
    }, {
        data: 2, title: "c"
    }, {
        data: 3, title: "d"
    }, {
        data: 4, title: "e"
    }, {
        data: 5, title: "f"
    }, {
        data: 6, title: "g"
    }]
});

$('#qtw-graph-table2').dataTable({
    data: dataParse,
    columns: [{
        data: 8, title: "h"
    }, {
        data: 9, title: "i"
    }]
});

<强>样本

请参阅updated jsFiddle以获取代码和演示。

Answer 2

一种方法是，当您获得数据时，您可以构建一个仅包含最后两列的数组并使用splice并将其用于第二个表

http://jsfiddle.net/2ozh0ayt/

HTML

<h1>Table 1</h1>

<table id='qtw-graph-table1' class='display' width='100%'>
    <thead></thead>
    <tbody></tbody>
</table>
<br/>

<h2>Table 2</h2>

<table id='qtw-graph-table2' class='display' width='100%'>
    <thead></thead>
    <tbody></tbody>
</table>

JS

var dataParse = [
    [8, 34, 784, 421, "30.77%", "1.90%", 26, 8, 95737, 1121742]
];
/* Build the table data from dataParse, containing only last two columns */
function funcData() {
    var data = [];
    for (var i = 0; i < dataParse.length; i++) {
        data.push(dataParse[i].slice(-2));
    }
    return data;
}

$('#qtw-graph-table1').DataTable({
    data: dataParse,
    columns: [{
        title: "a"
    }, {
        title: "b"
    }, {
        title: "c"
    }, {
        title: "d"
    }, {
        title: "e"
    }, {
        title: "f"
    }, {
        title: "g"
    }]
});

$('#qtw-graph-table2').dataTable({
    data: funcData(),
    columns: [{
        title: "h"
    }, {
        title: "i"
    }]
});

DataTables use only specific parts of a JSON object

2 个答案: