Question

我有以下ajax来电号召唤行动方法，以根据产品类别获取产品清单。

'#ddlProductCategoriesList'是一个下拉列表（产品类别），当选择更改时，它应该获取该类别中的产品并将其分配给JQuery Datatable。我能够破坏jquery表中的先前数据但是在销毁之后无法用新数据初始化它，如何使用新数据加载jquery datatable？

注意：Action以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")

            }
        });
    });

Answer 1

为什么不使用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>

数据表初始化：

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

这样您就忘记了手动重新加载表格。官方文档中提供了大量有关大量示例的信息

https://www.datatables.net

如何将数据加载到Datatable？

1 个答案: