DataTables警告:table id = myDatatable - 无效的JSON响应。有关此错误的更多信息,请参阅http://datatables.net/tn/1

时间:2017-05-05 09:37:39

标签: json ajax model-view-controller datatables

我正在使用Northwind数据库,并且我在主题中收到此错误。所以这里是视图和控制器:

epublic class TestController : Controller
{
    private dbNorthwindEntities db = new dbNorthwindEntities();

    // GET: Test
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetOrders()
    {
        using (dbNorthwindEntities db = new dbNorthwindEntities())
        {
            //var orders = db.Orders.OrderBy(o => o.OrderID).ToList();

            var orders = db.Orders.Include(o => o.Customer).Include(o => o.Employee).Include(o => o.Shipper).OrderBy(o => o.OrderID).ToList();
            return Json(new { data = orders }, JsonRequestBehavior.AllowGet);
        }
    }

e@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/>
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
 </head>
<body>
    <div style="width:90%; margin:0 auto">
        <table id="myDatatable">
            <thead>
                <tr>
                    <th>Customer ID</th>
                    <th>Employee ID</th>
                    <th>Order Date</th>
                    <th>Required Date</th>
                    <th>Ship Via</th>
                    <th>Freight</th>
                    <th>Ship name</th>
                    <th>Ship Address</th>
                    <th>Ship City</th>
                    <th>Ship Region</th>
                    <th>Ship Postal</th>
                    <th>Ship Country</th>
                </tr>
            </thead>
        </table> 
   </div>

    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">

    </script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>

    <script>
        $(document).ready(function () {
            var oTable = $('#myDatatable').DataTable({

                "ajax": {

                    " url " : '/test/GetOrders',
                    "type" : "get",
                    "datatype" : "json"

                },
                "columns": [
                       { "data": "CustomerID", "autoWidth": true },
                        { "data": "EmployeeID", "autoWidth": true },
                        { "data": "OrderDate", "autoWidth": true },
                        { "data": "RequiredDate", "autoWidth": true },
                        { "data": "ShipVia", "autoWidth": true },
                        { "data": "Freight", "autoWidth": true },
                            { "data": "ShipName", "autoWidth": true },
                                { "data": "ShipAddress", "autoWidth": true },
                                    { "data": "ShipCity", "autoWidth": true },
                                        { "data": "ShipRegion", "autoWidth": true },
                                            { "data": "ShipPostalCode", "autoWidth": true },
                                                { "data": "ShipCountry", "autoWidth": true }

                ]

            });
        });
    </script>

</body>
</html>

0 个答案:

没有答案