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调用时，您将在现有表中追加数据。

因此它将仅在上面的代码后面添加

要先解决这个空的肢体，然后追加

 $.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": "[]",

  }
});

jQuery datatable ajax无可用数据mvc

1 个答案: