Question

我想将表中的数据加载到jQuery DataTable中。为此，我在代码下面应用了：

HTML

@{
    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.16/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
</head>
<body>
    <div style="width:90%;margin:0 auto">
        <table id="mydatatable">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Id</th>
                <th>City</th>
                <th>Country</th>
            </tr>
        </table>
    </div>
    <script src="~/scripts/jquery-3.2.1.min.js"></script>
    <script src="~/scripts/jquery.validate.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/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: "/Home/GetEmployees",
                    type: "get",
                    database: "json"
                },
                "columns": [
                    { "data": "FirstName", "autowidth": true },
                    { "data": "LastName", "autowidth": true },
                    { "data": "EmailId", "autowidth": true },
                    { "data": "City", "autowidth": true },
                    { "data": "Country", "autowidth": true }
                ]
            });
        });
    </script>
</body>
</html>

控制器

using MVC_CRUD.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;


namespace MVC_CRUD.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetEmployees() {
            using (MvcCRUDDBEntities dc = new MvcCRUDDBEntities()) {
                var employees = dc.Employees.OrderBy(a => a.FirstName).ToList();
                return Json(new { data = employees }, JsonRequestBehavior.AllowGet);
            }
        }
    }
}

我在＆＃34; // Home / GetEmployees＆＃34;中收到的数据是：

{"data":[{"EmployeeId":4,"FirstName":"Ankit","LastName":"Agarwal","EmailId":"ankit@xyz.com","City":"Pune ","Country":"India     "},{"EmployeeId":2,"FirstName":"Niraj","LastName":"Desai","EmailId":"niraj@xyz.com","City":"Bilimora ","Country":"India     "},{"EmployeeId":1,"FirstName":"Pratik","LastName":"Soni","EmailId":"pratik@xyz.com","City":"Valsad ","Country":"India     "},{"EmployeeId":3,"FirstName":"Shezad","LastName":"Khan","EmailId":"shezad@xyz.com","City":"Manglore ","Country":"India     "}]}

但是当我运行应用程序时，DataTable没有任何数据：

我想要的是数据应该在应用程序启动时加载到DataTable中。我尝试了StackOverflow上现有的一些解决方案，但没有一个能帮助我。

更新：调试时我发现在HomeController.cs文件＆＃34; GetEmployees＆＃34;方法不是被调用的事件。

Answer 1

您需要编辑以下代码：

var oTable = $("mydatatable").DataTable

到

var oTable = $("#mydatatable").DataTable

因为您有table id="mydatatable"。要在jQuery中按id获取此元素，您需要在#之前使用id。

<强>更新

客户端

您需要添加以下选项以从服务器获取数据：

oTable = $('#mydatatable').dataTable({  
       "bServerSide": true, 
        ...
    });

服务器端

return Json(new {
 data = employees.Select(e => new {
  FirstName = e.FirstName,
   LastName = e.LastName,
   StatusLU = e.StatusLU,
   EmailId = e.EmailId,
   City = e.City,
   Country = e.Country
 })
}, JsonRequestBehavior.AllowGet);

Answer 2

尝试一次：

var draw = Request.Form.GetValues("draw").FirstOrDefault();

return Json(new 
       { draw = draw, 
         recordsFiltered = recordsTotal, 
         recordsTotal = recordsTotal,  //1000
         data = employees 
      }, JsonRequestBehavior.AllowGet);

更新：我发现你在属性中使用了数据库，这似乎是错误的。

var oTable = $("#mydatatable").DataTable({

                "processing": true,  //update
                "serverSide": true, //update

                "ajax": {
                    url: "/Home/GetEmployees",
                    type: "get",
                    datatype: "json" //review this
                },
                "columns": [
                    { "data": "FirstName", "name": "FirstName", "autowidth": true },
                    { "data": "LastName", "name": "LastName",  "autowidth": true },
                    { "data": "EmailId", "name": "EmailId",  "autowidth": true },
                    { "data": "City", "name": "City",  "autowidth": true },
                    { "data": "Country", "name": "Country",  "autowidth": true }
                ]
            });

DataTable不基于从AJAX调用

2 个答案: