jquery数据表ajax没有可用的数据mvc [英] jquery datatable ajax no data available mvc

问题描述

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

HTML:

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

查询:

 $(document).ready(function () {$('#summary-table').DataTable({页长:25，dom: '<"html5buttons"B>lTfgitp',纽扣: [{扩展:'复制'}，{扩展:'csv'}，{扩展:'excel'，标题:'ExampleFile'}，{扩展:'pdf'，标题:'示例文件'}，{扩展:'打印'，自定义:功能(赢){$(win.document.body).addClass('white-bg');$(win.document.body).css('font-size', '10px');$(win.document.body).find('table').addClass('紧凑').css('字体大小', '继承');}}]});$("#summary-table").DataTable();});$.ajax({类型:'获取'，url: "GetInventoryList",mimeType: 'json',成功:功能(数据){$.each(data, function (i, data) {var body = "";正文 += ""+ data.ProductCode + "</td>";正文 += ""+ data.ProductName + "</td>";正文 += ""+ data.Description + "</td>";正文 += "</tr>";$("#summary-table tbody").append(body);});$("#summary-table").DataTable();},错误:函数(){alert('失败！');}});

控制器:

 public JsonResult GetInventoryList(){IEnumerable模型 = productBLL.GetAll().AsEnumerable();var model1 = from m in model select new { m.ProductId,m.ProductCode, m.ProductName, m.Description };返回 Json(model1, JsonRequestBehavior.AllowGet);}

解决方案

当你的数据表被加载时，没有数据，所以 Datatbel 添加了一行说表中没有可用数据.

但是当您执行 ajax 调用时，您是在现有表中附加数据.

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

先解析这个空的tbody然后追加

 $.ajax({类型:'获取'，url: "GetInventoryList",mimeType: 'json',成功:功能(数据){//空的 tbody$("#summary-table tbody").empty();$.each(data, function (i, data) {var body = "";正文 += ""+ data.ProductCode + "</td>";正文 += ""+ data.ProductName + "</td>";正文 += ""+ data.Description + "</td>";正文 += "</tr>";$("#summary-table tbody").append(body);});$("#summary-table").DataTable();},错误:函数(){alert('失败！');}});

编辑 1

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

我将 ajax 和 datatable 初始化结合在一起，让 datatable 做一些肮脏的工作.

类似的东西

$("#summary-table").DataTable({处理":假，服务器端":假，分页":真的，摧毁":真的，页长:25，纽扣: [{扩展:'复制'}，{扩展:'csv'}，{扩展:'excel'，标题:'ExampleFile'}，{扩展:'pdf'，标题:'示例文件'}，{扩展:'打印'，自定义:功能(赢){$(win.document.body).addClass('white-bg');$(win.document.body).css('font-size', '10px');$(win.document.body).find('table').addClass('紧凑').css('字体大小', '继承');}}],dom: '<"html5buttons"B>lTfgitp',列": [{数据":产品代码"}，{数据":产品名称"}，{数据":描述"}],阿贾克斯":{"url": "GetInventoryList","类型": "获取","dataSrc": "[]",}});

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

解决方案

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

  }
});

这篇关于jquery数据表ajax没有可用的数据mvc的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！