MVC JsonResult中的Jquery DataTable

时间:2015-04-30 12:21:21

标签: model-view-controller jquery-datatables

我是网络新手并试图绘制JQuery.DataTable。这是我的action

 public ActionResult Index(jQueryDataTableParamModel param)
        {
            var result = new List<Company>() 
           {
               new Company(){Address = "defre", Name = "ais.com", Town = "New York"},
               new Company(){Address = "defre", Name = "ais.com", Town = "New York"},
               new Company(){Address = "defre", Name = "ais.com", Town = "New York"},
               new Company(){Address = "defre", Name = "ais.com", Town = "New York"},
               new Company(){Address = "defre", Name = "ais.com", Town = "New York"},
               new Company(){Address = "defre", Name = "ais.com", Town = "New York"},
               new Company(){Address = "defre", Name = "ais.com", Town = "New York"},
               new Company(){Address = "defre", Name = "ais.com", Town = "New York"},
               new Company(){Address = "defre", Name = "ais.com", Town = "New York"},
               new Company(){Address = "defre", Name = "ais.com", Town = "New York"},
           };
               return Json(new{
                    sEcho = param.sEcho,
                    iTotalRecords = result.Count(),
                    iTotalDisplayRecords = result.Count(),
                    aaData = result
                }, JsonRequestBehavior.AllowGet);
            }            
        }  

这是我的View

@model IEnumerable<TestProject.Models.Company>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.1.3.js"></script>
    <script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
    <link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
    <link href="~/Content/DataTables/css/dataTables.bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/DataTables/dataTables.bootstrap.js"></script>
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <title>Index</title>
</head>
<body>
    <div> 
        <table id="myDataTable">
            <thead>
                <tr>
                    <th>Company name</th>
                    <th>Address</th>
                    <th>Town</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr id="@item.ID">
                        <td>@item.Name</td>
                        <td>@item.Address</td>
                        <td>@item.Town</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</body>
</html>
<script>
    $(document).ready(function () {

        $('#myDataTable').dataTable({
            "bServerSide": true,
            "sAjaxSource": "JQueryTableTestController/Index",
            "bProcessing": true,
            "aoColumns": [                            
                            { mDataProp: "Name", sTitle: "Company Name" },
                            { mDataProp: "Address", sTitle: "Address" },
                            { mDataProp: "Town", sTitle: "Town" }
            ]
        });
    });
</script>

我无法理解我做错了什么。我正在尝试阅读这篇文章:http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part 没有Json结果一切正常。但我想用Json做这个,因为我想做服务器端分页,过滤,排序。谁能告诉我:我做错了什么?

0 个答案:

没有答案