jquerydataTable使用数组的js数组作为数据源，dataTable版本1.10

Question

我刚尝试使用dataTable.js，但在使用数组的js数组作为数据源生成表时遇到了问题。我试着在谷歌上搜索一些以前被问过的问题，但这些都对我没有帮助

我正在做的功能非常简单，我需要动态创建数据源，2D数组，就像：阵列屏幕截图

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

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

当前函数最终没有找到任何数据。希望我在这里把我的问题说清楚，任何建议都将不胜感激！

Answer 1

我使用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" }
    ]
} );

Answer 2

似乎已经正确初始化了表（如果你能在页面上看到有标题但没有数据的表？）。我认为您的表在动态创建的数据填充完成之前就已经初始化了。为了进行排序，你需要清除所有数据并像这样添加：

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

在Javascript中，这是一个很容易犯的错误，因为当事情发生时，你不能得到保证。我制作了一个简单的JSFiddle，它说明了我认为正在发生的事情。

但基本上，每次需要更新数据时，都要清除表并添加新行，不要忘记再次绘制：

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" }
    ]
});

希望能有所帮助。

Answer 3

更新表中记录的适当方法是使用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);
         }

     })

通过append、prepend等更新DOM会导致问题