JQuery 数据Tables 插件为空 Table

Question

我有在 HTML 中构建 table 的代码。我们使用字段来应用自定义搜索并更新 table。我想将分页和列 sorting/filtering 添加到 table，所以我试图将其转换为 jQuery 数据 table 使用来自 datatables.net 的插件。

我已经尝试创建 table 然后使用 .DataTable() 方法对其进行初始化但无济于事（没有添加额外的功能）。

我已经尝试使用数据和列属性进行初始化，但我的 table 只是空的。

我已尝试遵循以下文档：

https://www.sitepoint.com/working-jquery-datatables/ - 我能够让示例在这里工作，但我使用的是不同类型的数据源和更新版本的库
https://datatables.net/manual/data/ - 显示如何正确使用我的数据源和较新版本的实际文档（无法使其工作）
关于Whosebug的几个问题

我的 jQuery 数据 table 在开发者控制台中显示一个空的 table，没有任何错误。

table:

<table id="productsearchresults">
    <thead>
        <tr id="header">
            <th>
                Name
            </th>
            <th>
                Description
            </th>
            <th>
                Unit Price
            </th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

相关javascript:

var recordData = j$.map(data.records, function(item) {
    return {
        name: item.Name,
        description: item.Product2.Description,
        unitprice: item.UnitPrice
    };
});

var columns = [
    {data:'name'},
    {data:'description'},
    {data:'unitprice'}
];

console.log(recordData);
console.log(columns);

j$('#productsearchresults').DataTable({
    data: recordData,
    columns: columns
});

控制台输出：

Answer 1

我觉得你的代码没问题。我尝试使用与您相同的代码来重现该问题，但它对我有用。

JS

var recordData = [
    {name:'Item A', description:'Description 1', unitprice:'12.36'},
    {name:'Item B', description:'Description 2', unitprice:'63.98'},
    {name:'Item C', description:'Description 3', unitprice:'1258.99'}];

var columns = [
    {data:'name'},
    {data:'description'},
    {data:'unitprice'}
];

  $('#productsearchresults').DataTable({
    data: recordData,
    columns: columns
  });

看这里：https://codepen.io/anon/pen/OvaJVW?editors=1010

你能确定你在数据表 js 之前包含了 jQuery 吗？

JQuery 数据Tables 插件为空 Table

JQuery DataTables Plugin Empty Table

jquery

datatables-1.10