jQuery 数据表 asp.net MVC 的类属性答案

【问题标题】：class properties to jquery datatables asp.net MVCjQuery 数据表 asp.net MVC 的类属性
【发布时间】：2016-02-21 21:58:17
【问题描述】：

看了很多代码示例后，我无法使用 Jquery Datatables 和 MVC 制作简单的数据表。

我收到了错误

我的控制器是这个

 public class DataTableController : Controller
{
    // GET: DataTable
    public ActionResult Index()
    {
        return View();
    }
    public ActionResult GetData()
    {
        var registros = new List<PruebaClass>();
        var pruebaClass1 = new PruebaClass
        {
            Race = "Aliens",
            Year = 1990,
            Total = 50

        };

        var pruebaClass2 = new PruebaClass
        {
            Race = "MArcianos",
            Year = 200,
            Total = 20

        };
        registros.Add(pruebaClass1);
        registros.Add(pruebaClass2);

        var resultado = Json(new { aaData = registros.ToList() }, JsonRequestBehavior.AllowGet);
        return resultado;
    }

    public class PruebaClass
    {
        public string Race { get; set; }
        public int Year { get; set; }
        public int Total { get; set; }
    }

}

我的看法是这样的

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<table id="miTable">
    <thead>
        <tr>
            <th>Race</th>
            <th>Year</th>
            <th>Total</th>
        </tr>
    </thead>
</table>

@section Scripts{
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Scripts/MyDataTablejs.js"></script>

    }

我的 javascript 文件是这样的

$(document).ready(function () {
    $('#miTable').DataTable(
        {

            "sAjaxSource": "../DataTable/GetData",

            "columns": [
                { "Data": "Race", "autoWidth": true },
                { "Data": "Year", "autoWidth": true },
                { "Data": "Total", "autoWidth": true }
            ]
        });
});

我可以到达 ActionResult，我的视图显示了两行，但每个单元格的内容为空。我从数据源 '0' 得到了严重的错误 Datatables warning (table id= 'miTable')Requested unknown parameter '0' 。

我很确定问题出在源（可能是 JSON 格式）和列名映射，但我不知道是什么。有什么帮助吗？

【问题讨论】：

尝试使用索引而不是名称："Data": 0、"Data": 1 等。您可能仍然遇到问题，因为您没有返回任何要使用的数据表的行计数值，但让我们处理第一个错误。
我为列定义和数据定义使用了错误的属性。让我感到羞耻：D

标签： javascript jquery asp.net-mvc datatables

【解决方案1】：

真丢脸。最后，我将列定义与 jquery 文件中的 apropiate 选项进行了匹配。我知道我错过了一些东西。我需要做的就是使用“aocolumns”和“mDataProp”

这段代码解决了所有问题

$(document).ready(function () {
    $('#miTable').DataTable(
        {

            "sAjaxSource": "../DataTable/GetData",

            "aoColumns": [

                { "mDataProp": "Race", "autoWidth": true },
                { "mDataProp": "Year", "autoWidth": true },
                { "mDataProp": "Total", "autoWidth": true }
            ]




        });
});

【讨论】：