jquery datatable ajax 没有可用的数据 mvc

Question

我有一张在$( document ).ready 函数中创建的表格。我也在使用 jQuery DataTables 插件。出于某种原因，当页面加载时，ajax 调用控制器并返回数据并将此设置为我的网格所有已获取的数据，但尽管所有数据都加载到数据表中，但仍会占用一行并警告我没有可用数据，我的代码如下所示；

HTML：

<div class="ibox-content">
                <table class="table table-striped table-bordered table-hover dataTables-example" id="summary-table">
                    <thead>
                        <tr>
                            <th>@Html.DisplayNameFor(model => model.ProductCode)</th>
                            <th>@Html.DisplayNameFor(model => model.ProductName)</th>
                            <th>@Html.DisplayNameFor(model => model.Description)</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="SetInventoryList">                         
                    </tbody>
                </table>
            </div>

jquery：

 $(document).ready(function () {
        $('#summary-table').DataTable({
            pageLength: 25,   
            dom: '<"html5buttons"B>lTfgitp',
            buttons: [
                { extend: 'copy' },
                { extend: 'csv' },
                { extend: 'excel', title: 'ExampleFile' },
                { extend: 'pdf', title: 'ExampleFile' },

                {
                    extend: 'print',
                    customize: function (win) {
                        $(win.document.body).addClass('white-bg');
                        $(win.document.body).css('font-size', '10px');

                        $(win.document.body).find('table')
                            .addClass('compact')
                            .css('font-size', 'inherit');
                    }
                }
            ]

        });
        $("#summary-table").DataTable();
    });

    $.ajax({
        type: 'GET',
        url: "GetInventoryList",
        mimeType: 'json',
        success: function (data) {
            $.each(data, function (i, data) {
                var body = "<tr>";
                body += "<td>" + data.ProductCode + "</td>";
                body += "<td>" + data.ProductName + "</td>";
                body += "<td>" + data.Description + "</td>";
                body += "</tr>";
                $("#summary-table tbody").append(body);
            });

            $("#summary-table").DataTable();
        },
        error: function () {
            alert('Fail!');
        }
    });

控制器：

    public JsonResult GetInventoryList()
    {
        IEnumerable<ProductBO> model = productBLL.GetAll().AsEnumerable();
        var model1 = from m in model select new { m.ProductId,m.ProductCode, m.ProductName, m.Description };
        return Json(model1, JsonRequestBehavior.AllowGet);
    }

Answer 1

加载数据表时没有数据，因此 Datatbel 会添加一行显示“表中没有可用数据。

但是当您进行 ajax 调用时，您会将数据附加到现有表中。

所以它只会附加在上面的代码下面

先解析这个空的tbody再追加

 $.ajax({
        type: 'GET',
        url: "GetInventoryList",
        mimeType: 'json',
        success: function (data) {
            // Empty tbody
            $("#summary-table tbody").empty();
            $.each(data, function (i, data) {
                var body = "<tr>";
                body += "<td>" + data.ProductCode + "</td>";
                body += "<td>" + data.ProductName + "</td>";
                body += "<td>" + data.Description + "</td>";
                body += "</tr>";
                $("#summary-table tbody").append(body);
            });

            $("#summary-table").DataTable();
        },
        error: function () {
            alert('Fail!');
        }
    });

编辑 1

理想情况下，我不会像您使用的那样使用数据表。

我会把ajax和datatable初始化结合起来，让datatable做脏活。

像这样的

$("#summary-table").DataTable({
  "processing": false,
  "serverSide": false,
  "paging": true,
  "destroy": true,
   pageLength: 25,   
   buttons: [
        { extend: 'copy' },
        { extend: 'csv' },
        { extend: 'excel', title: 'ExampleFile' },
        { extend: 'pdf', title: 'ExampleFile' },

        {
            extend: 'print',
            customize: function (win) {
                $(win.document.body).addClass('white-bg');
                $(win.document.body).css('font-size', '10px');

                $(win.document.body).find('table')
                    .addClass('compact')
                    .css('font-size', 'inherit');
            }
        }
    ],
   dom: '<"html5buttons"B>lTfgitp',
  "columns": [
        { "data": "ProductCode" },
        { "data": "ProductName" },
        { "data": "Description" }                           
  ],
  "ajax": {
      "url": "GetInventoryList",
      "type": "GET",
      "dataSrc": "[]",

  }
});