如何将数据加载到Datatable？

i have the following ajax call to call action method to get a list of products based on their product Category.

我有以下ajax调用来调用操作方法来获取基于其产品类别的产品列表。

'#ddlProductCategoriesList' is a drop down list (Product Category), when the selection changes it should fetch products in that category and assign them to a JQuery Datatable. I was able to destroy the previous data in the jquery table but after destroying it could not initialize it with new data, How do i load jquery datatable with new data?

'#ddlProductCategoriesList'是一个下拉列表(Product Category),当选择更改时,它应该获取该类别中的产品并将它们分配给JQuery Datatable。我能够销毁jquery表中的先前数据,但是在销毁后无法用新数据初始化它,如何使用新数据加载jquery数据表?

Note: The Action returned data as json successfully but load data to table failed

注意: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")

            }
        });
    });

1 个解决方案

#1

Why don't you use Datatables built-in support for filtering?

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

Here is a reduced example of how it can be implemented

这是一个如何实现它的简化示例

Datatables markup:

<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>

Datatables initialization:

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

This way you forget about reloading the table manually. There is plenty of information available in the official documentation with lots of examples

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

https://www.datatables.net

#1