Jquery 如何将数据加载到Datatable？

我有以下

ajax

call-to-call操作方法来根据产品类别获取产品列表

“#ddlProductCategoriesList”

是一个下拉列表（产品类别），当选择更改时，它应获取该类别中的产品并将其分配给

JQuery

数据表

。我能够销毁jquery表中以前的数据，但销毁后无法用新数据初始化它，如何用新数据加载jquery

datatable

注意：该操作成功地将数据作为json返回，但将数据加载到表失败

    $('#ddlProductCategoriesList').change(function (item) {

        var x = $(this).val();

        $.ajax({
            url: '@Url.Action("GetProductsByCategory","Products")',
            method: 'get',
            cache:false,
            data: { 'cid': x },
            contentType: 'application/json; chatset=utf-8',
            dataType: 'json',
            success: function (data) {                      
                alert('hello');

                table.destroy();

                $('#t1').empty();

                $('#t1').dataTable({
                    data: data,
                    columns: [
                        { 'data': 'item.ID' },
                        { 'data': 'item.CategoryID' },
                        { 'data': 'item.ProductName' },
                        { 'data': 'item.LastName' }

                    ]
                });


            },
            error: function (x, y, z) {
                alert("error")

            }
        });
    }); 

---

为什么不使用Datatables内置的过滤支持

下面是如何实现它的简化示例

数据表标记：

<table class="table" id="dt">
    <thead>
        <tr role="row" class="filter">
            <td>
                <select id="dropDownWithCategories">
                    <option value="1">Category 1</option>
                    <option value="2">Category 2</option>
                </select>
            </td>
            <td>
                <button class="filter-submit">Search</button>
            </td>
        </tr>
        <tr>
            <th>Id</th>
            <th>Product</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

这样，您就不用手动重新加载表了。官方文件中有大量可用信息和大量示例

---

在

表.destroy（）

中，什么是

表

？我假设它的

var table=$（'#t1'）.DataTable（）？您还可以删除
contentType:'application/json；chatset=utf-8'，
-它对于GET毫无意义（如果它是posit，则无论如何都不会工作，因为您尚未将数据字符串化）@StephenMuecke table is var table=$（'#t1'）。DataTable（）；您在浏览器控制台中是否有任何错误？@StephenMuecke它说table.destroy（）不是一个函数您可以试试
$（'#t1'）.DataTable（）.destroy（）相反（您是否收到相同的错误？）
grid.init({  // grid.init calls an own datatables wrapper class which I will ignore...
    src: $("#dt"),
    dataTable: {
        ajax: {
            url: "/Products/GetProductsByCategory", // 
            data: function (d) {
                d.id = $("#dropDownWithCategories").val(); // Here you add the category parameter when calling GetProducts
            }
        },
        serverSide: true,
        filter: true,
        retrieve: true,
        columns: [
        { data: "Id" },
        { data: "Product" }
        ]
    }
});