Question

我试图通过mvc将数据加载到jQuery数据表中，但是数据只是在浏览器中以json格式检索，而不是像这样加载到数据表中：

{"data":[{"ID":1,"FullName":"Jhon Smith","Email":"adil@gmail.com","Address":"huwai Street 789"}

Datatable可以完美地处理伪数据，但是当数据来自数据库时，它只是以json格式返回记录。

AllUsersDetail.cshtml：

    <table id="myTable" class="display">
    <thead>
        <tr>
            <th>
                ID
            </th>
            <th>
                FullName
            </th>
            <th>
                Email

            </th>
            <th>
                Address
            </th>
        </tr>
    </thead>
</table>

    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    @section Scripts{
    <script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#myTable').DataTable({
                    "ajax": {
                        "url": "/Dashboard/AllUsersDetail",
                        "type": "Get",
                        "datatype": "Json",
                    },
                    "Columns": [
                        { "data": "UserId" },
                        { "data": "FullName" },
                        { "data": "Email" },
                        { "data": "Address" }

                    ]

                });
            });
        </script>

控制器

 public ActionResult AllUsersDetail()
        {

                List<UserProfileModel> Allstudent = DashboardViewModel.AllUserDetail();
            return Json(new { data = Allstudent }, JsonRequestBehavior.AllowGet);


        }

  public static List<UserProfileModel> AllUserDetail()
        {
            List<UserProfileModel> emps = new List<UserProfileModel>();
            using (SqlConnection con = new SqlConnection(AppSetting.ConnectionString()))
            {
                using (SqlCommand cmd = new SqlCommand("Select * from Users", con))
                {
                   // cmd.CommandType = System.Data.CommandType.StoredProcedure;
                    con.Open();

                    SqlDataReader rdr = cmd.ExecuteReader();
                    while (rdr.Read())
                    {
                        UserProfileModel emp = new UserProfileModel();
                        emp.ID = Convert.ToInt16(rdr["UserId"]);
                        emp.FullName = rdr["FullName"].ToString();
                        emp.Email = rdr["Email"].ToString();
                        emp.Address = rdr["Address"].ToString();

                        emps.Add(emp);

                    }
                }
            }

            return emps;
        }

Answer 1

尝试此示例代码，让我知道

<div class="row">
<table id="tblData" clientidmode="Static" class="hover">
    <thead>
        <tr class="gridStyle">
            <th>StudentID</th>
            <th>StudentName</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script type="text/javascript">
  $(document).ready(function () {
    $("#tblData").DataTable({

        "processing": true, // for show progress bar
        "serverSide": false, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false, // for disable multiple column at once
        "pageLength": 5,

        "ajax": {
            "url": "/Home/LoadData",
            "type": "GET",
            "datatype": "json"
        },


        "columns": [
            { "data": "StudentID", "name": "StudentID", "autoWidth": true },
            { "data": "StudentName", "name": "StudentName", "autoWidth": true },
        ]

    });
});

这是我的控制器代码

public class HomeController : Controller
{
    public ActionResult LoadData()
    {
        IList<Student> studentList = new List<Student>() {
            new Student(){ StudentID=1, StudentName="Bill"},
            new Student(){ StudentID=2, StudentName="Steve"},
            new Student(){ StudentID=3, StudentName="Ram"},
            new Student(){ StudentID=4, StudentName="Moin"}
        };
        return Json(new { data = studentList }, JsonRequestBehavior.AllowGet);
    }

    public class Student
    {
        public int StudentID { get; set; }
        public string StudentName { get; set; }
    }
}

Answer 2

该解决方案如何？

为UserProfile创建网格模型类...

public class UserProfileGridModel
{
  public int Id {get; set;}
  public string FullName {get; set;}
  public string Email {get; set;}
  public string Address {get; set;}

  public static List<UserProfileGridModel> GetRows(IQueryable<dbo_Users>)
  {
     var data = dbQuery.ToList().Select(r => new UserProfileGridModel()
     {
         DT_RowId = r.Id,
         FullName= r.FullName,
         Address = r.Address,
         Email= r.Email
     });

     return data.ToList();
  }
}

您可以执行的控制器...

public JsonResult AllUserDetail()
{
   // Get user data from database
   var dbData = AppData.UserProfile.GetAll();

   // Call created class for grid model
   var data = UserProfileGridModel.GetRows(dbData);

   // Return JSON 
   return new JsonResult
   {
      Data = new { data },
      JsonRequestBehavior = JsonRequestBehavior.AllowGet,
      MaxJsonLength = int.MaxValue
   };
 }

还有鉴于...

// Datatable columns
var myColums = [
  {
    data: 'DT_RowId',
    title: 'ID',
    filter: 'input',
    visible: false
  },
  {
    data: 'FullName',
    title: 'FullName',
    filter: 'input'
  },
  {
    data: 'Email',
    title: 'Email',
    filter: 'input'
  },
  {
    data: 'Address',
    title: 'Address',
    filter: 'input'
  },  
];



// Init datatable  
var myTable = $("#myTable ").DataTable({
   ajax: {
      url: "/Dashboard/AllUsersDetail",
   },
   columns: myColumns,
});

希望有帮助...

如何将Json数据加载到jQuery Datatable中？

2 个答案: