jquery datatable ajax no data available mvc

Question

I have a table that is made in the $( document ).ready function. I am also using the jQuery DataTables plugin. For some reason, when the page loads,ajax call a controller and return data and set this my grid all taken data but although all data load into datatable, a row is taken and warn me as no data available, my code as shown below;

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!');
        }
    });

Controller:

    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

When your Datatable is loaded there is no Data so Datatbel adds a row saying "No data available in Table.

But when you do ajax call you are appending Data in existing table.

So it will just append below above code

To resolve this empty tbody first and then append

 $.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!');
        }
    });

Edit 1

Ideally I will not use datatable the way you are using.

I will combine ajax and datatable initialisation together and let datatable do dirty work.

Something like this

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

  }
});