加载 ASP.Net MVC JSONResult jQuery 数据表

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7835960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 00:19:52  来源:igfitidea点击:

Load ASP.Net MVC JSONResult jQuery DataTables

jqueryjsonasp.net-mvc-3datatables

提问by PW763

I'm trying to get the DataTables(http://datatables.net) to work with a JsonResult returned by an ASP.Net MVC Controller. I keep getting a "DataTables warning (table id = 'example'): Requested unknown parameter '0' from the data source for row 0" error which according to the docs means it cant find the columns.

我试图让 DataTables(http://datatables.net) 与 ASP.Net MVC 控制器返回的 JsonResult 一起工作。我不断收到“DataTables 警告(表 id = 'example'):从第 0 行的数据源请求未知参数 '0'”错误,根据文档,这意味着它找不到列。

The code in controller that returns the JsonResult looks like:

控制器中返回 JsonResult 的代码如下所示:

    public JsonResult LoadPhoneNumbers()
    {
        List<PhoneNumber> phoneNumbers = new List<PhoneNumber>();
        PhoneNumber num1 = new PhoneNumber { Number = "555 123 4567", Description = "George" };
        PhoneNumber num2 = new PhoneNumber { Number = "555 765 4321", Description = "Kevin" };
        PhoneNumber num3 = new PhoneNumber { Number = "555 555 4781", Description = "Sam" };

        phoneNumbers.Add(num1);
        phoneNumbers.Add(num2);
        phoneNumbers.Add(num3);

        return Json(phoneNumbers, JsonRequestBehavior.AllowGet);
    }

PhoneNumber is just a plain C# class with 2 properties, Number and Description.

PhoneNumber 只是一个普通的 C# 类,具有 2 个属性,Number 和 Description。

The javascript that retrieves and loads the data looks like:

检索和加载数据的 javascript 如下所示:

<script>
$(document).ready(function () {
    $('#example').dataTable({
        "bProcessing": true,
        "sAjaxSource": '/Account/LoadPhoneNumbers/',
        "sAjaxDataProp": ""
    });
});
</script>

And the html looks like:

html看起来像:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
    <tr>
        <th>
            Number
        </th>
        <th>
            Description
        </th>
    </tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>

I've deliberately set sAjaxDataProp to an empty string so that DataTables does not look for aaData. Even when I explicitly set aaData like so in the controller:

我特意将 sAjaxDataProp 设置为空字符串,以便 DataTables 不会查找 aaData。即使我在控制器中像这样显式设置 aaData :

return Json(new { aaData = phoneNumbers });

I still get the error. Any advice please?

我仍然收到错误。请问有什么建议吗?

Thanks!

谢谢!

回答by Darin Dimitrov

The following works great for me:

以下对我很有用:

$(function () {
    $('#example').dataTable({
        bProcessing: true,
        sAjaxSource: '@Url.Action("LoadPhoneNumbers", "Home")'
    });
});

I have removed the sAjaxDataPropproperty.

我已删除该sAjaxDataProp属性。

with this data source:

使用此数据源:

public ActionResult LoadPhoneNumbers()
{
    return Json(new
    {
        aaData = new[] 
        {
            new [] { "Trident", "Internet Explorer 4.0", "Win 95+", "4", "X" },
            new [] { "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", "1.8", "A" },
            new [] { "Webkit", "iPod Touch / iPhone", "iPod", "420.1", "A" }
        }
    }, JsonRequestBehavior.AllowGet);
}

and for your example with phones simply:

对于您的电话示例,只需:

public ActionResult LoadPhoneNumbers()
{
    var phoneNumbers = new List<PhoneNumber>(new[] 
    {
        new PhoneNumber { Number = "555 123 4567", Description = "George" },
        new PhoneNumber { Number = "555 765 4321", Description = "Kevin" },
        new PhoneNumber { Number = "555 555 4781", Description = "Sam" }
    });

    return Json(new
    {
        aaData = phoneNumbers.Select(x => new[] { x.Number, x.Description })
    }, JsonRequestBehavior.AllowGet);
}

回答by HashTagDevDude

In this exampleit appears that the data returned from the controller method needs to be in a specific format. He's actually returning the list as part of aaData. It also explains what each parameter is for. Perhaps you're just not formatting the return in a json format that DataTables understands.

在此示例中,从控制器方法返回的数据似乎需要采用特定格式。他实际上是将列表作为 aaData 的一部分返回。它还解释了每个参数的用途。也许您只是没有以 DataTables 理解的 json 格式格式化返回。

public class HomeController : Controller
{
    public ActionResult AjaxHandler(jQueryDataTableParamModel param)
    {
        return Json(new{
                sEcho = param.sEcho,
                iTotalRecords = 97,
                iTotalDisplayRecords = 3,
                aaData = new List<string[]>() {
                    new string[] {"1", "a1", "a2", "a3"},
                    new string[] {"2", "b1", "b2", "b3"},
                    new string[] {"3", "c1", "c2", "c3"}
                    }
            },
        JsonRequestBehavior.AllowGet);
    }
}