JQuery DataTables 插件空表

Question

我有在 HTML 中构建表格的代码。我们使用字段来应用自定义搜索并更新表格。我想将分页和列排序/过滤添加到表中，因此我尝试使用 datatables.net 中的插件将其转换为 jQuery 数据表。

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

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

我已尝试遵循以下文档：

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

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

表：

<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

你能确定你在 datatables js 之前包含了 jQuery 吗？