jquery dataTable使用js数组数组作为数据源,dataTable版本1.10

时间:2016-07-29 16:15:06

标签: jquery datatables

我只是试图使用dataTable.js,我发现使用js数组数组作为数据源来生成表时遇到了麻烦。我之前曾尝试过谷歌,但这些都没有对我有所帮助。

我正在做的功能非常简单,我需要动态创建数据源,2D数组,就像: screenshot of array

然后使用上面的方法创建一个基本表。该官员给出的功能演示类似于:

 $('#actionTabDataTable').DataTable( {
    data: dataSet,
    columns: [
        { title: "1" },
        { title: "2" },
        { title: "3" },
        { title: "4." },
        { title: "5 date" },
        { title: "6" },
        { title: "7" },
        { title: "8" }
    ]
} );

当前的功能最终没有找到数据。希望我在这里明确提出我的问题,任何建议都将不胜感激!

3 个答案:

答案 0 :(得分:0)

我使用1.9,我认为这适用于该版本。但我发现情况发生了变化,DataTables 1.9不被视为遗产'

$('#actionTabDataTable').dataTable( {
    'aaData': dataSet,
    'aoColumns': [
        { sTitle: "1", sType: "string" },
        { sTitle: "2", sType: "string" },
        { sTitle: "3", sType: "string" },
        { sTitle: "4.", sType: "string" },
        { sTitle: "5 date", sType: "string" },
        { sTitle: "6", sType: "string" },
        { sTitle: "7", sType: "string" },
        { sTitle: "8", sType: "string" }
    ]
} );

答案 1 :(得分:0)

好像你已经正确地初始化了表(如果你能看到带有标题的表并且页面上没有数据?)。我认为在动态创建的数据完成填充之前,您的表正在初始化。为了排序你需要清除所有数据并添加如下:

table.clear().rows.add(dataSet).draw();

在Javascript中制作是一个容易犯的错误,因为当事情发生时你无法保证。我编写了一个简单的http://php.net/manual/en/function.str-replace.php来说明我认为正在发生的事情。

但基本上每次你需要更新数据时清除表格并添加新行并且不要忘记再次绘制它:

var dataSet = [];
setTimeout(function(){
  dataSet.push([
    "19",
    "+0.5",
    "-",
    "+0.4",
    "-0.6",
    "-0.6",
    "+0.7",
    "+0.8"
  ]);
    dataSet.push([
    "19",
    "+0.5",
    "-",
    "+0.4",
    "-0.6",
    "-0.6",
    "+0.7",
    "+0.8"
  ]);
  dataSet.push([
    "19",
    "+0.5",
    "-",
    "+0.4",
    "-0.6",
    "-0.6",
    "+0.7",
    "+0.8"
  ]);
  table.clear().rows.add(dataSet).draw();
}, 500);

var table = $('#actionTabDataTable').DataTable( {
    "data": dataSet,
    "columns": [
        { "title": "1" },
        { "title": "2" },
        { "title": "3" },
        { "title": "4." },
        { "title": "5 date" },
        { "title": "6" },
        { "title": "7" },
        { "title": "8" }
    ]
});

希望有所帮助。

答案 2 :(得分:0)

更新表中记录的适当方法是使用api函数。这取决于我猜的dataTable版本。对于版本1.10,我们可以使用类似:

var t = $('#actionTabDataTable').DataTable();

     $("#actionsOutcomeBtn").click(function(){

         for(i=0;i<dataSet.length;i++) {
             t.row.add(dataSet[i]).draw(false);
         }


     })

通过追加,前置等更新DOM会导致问题