2014-09-29 35 views
1

由于某种原因,我的数据没有被填充到表中。无法在jQuery数据表中填充数据

我有一个JSON数据,我只想填充数据表。

有人可以帮助我,让我知道我错过了哪一个简单的步骤?

我有版本1.9.4。

<table id="example"> 
    <thead> 
     <tr><th>name</th> 
      <th>position</th> 
      <th>salary</th> 
      <th>start_date</th> 
      <th>office</th> 
      <th>extn</th>   
    </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

$('#example').dataTable({ 
     data: [ 
      [ 
       "Tiger Nixon", 
       "System Architect", 
       "$3,120", 
       "2011/04/25", 
       "Edinburgh", 
       "5421" 
      ], 
      [ 
       "Garrett Winters", 
       "Director", 
       "5300", 
       "2011/07/25", 
       "Edinburgh", 
       "8422" 
      ] 
     ] 

    }); 

fiddle

回答

3

这里是一个1.9.4例子。你需要

  1. 通过与对象JSON,而不是一个数组
  2. 目标aaData,不dataaoData
  3. 指定aoColumns,如列 - > JSON值

我在这里仅使用上述数据的前两个“列”:

var json = [ 
    { "name" : "Tiger Nixon", "position" : "System Architect" /*,.,.,.*/ }, 
    { "name" : "Garrett Winters", "position" : "Director" /*,.,.,.*/ } 
]; 

var table = $('#example').dataTable({ 
    aaData : json, 
    aoColumns: [ 
     { mDataProp: "name" }, 
     { mDataProp: "position" } 
    ] 
}); 

小提琴 - >http://jsfiddle.net/4e7myzmm/
同一数据表中1.10.x - >http://jsfiddle.net/c27jj9he/

1

相反的data:,你需要使用aaData:

$('#example').dataTable({ 
    aaData: [ 
     [... 

默认情况下数据表将使用返回数据的“aaData”属性,它是阵列的一个数组表中每列的条目。见docs

jsfiddle