如何在MVC中使用Ajax将数据加载到DataTable？

Question

我正在使用ajax从数据库加载对象列表到datatable中。调试时，我的MVC操作结果似乎可以正确查询数据，但datatable列显示为空。

我尝试在MVC操作返回之前对列表进行序列化，但这并没有解决问题。

// Code from View

<table class="table table-striped" id="codetable">
<thead>
    <tr>
        <td>Student Number</td>
        <td>Student</td>
        <td>Faculty</td>
        <td>Department</td>
        <td>Program</td>
        <td>Code</td>
    </tr>
</thead>
<tbody>

</tbody>
</table>

<script>
    $(document).ready(function () {
        $("#codetable").DataTable({
            processing: true,
            serverSide: true,
            info: true,
            ajax: {
                url: '@Url.Action("GetVoters", "Index")',
                dataSrc: ""
            },

            Columns: [
                { "data": "StudentNumber" },
                { "data": "Name" },
                { "data": "Faculty" },
                { "data": "Department" },
                { "data": "Program" },
                { "data": "Code" }
            ]
        });
    });
</script>


//Code from Controller

public JsonResult GetVoters()
{
List<vt> stud = (from student in _context.Voters
                      select new vt
                      {
                          StudentNumber = student.StudentNumber,
                          Name = student.Name,
                          Faculty = student.Faculty,
                          Department = student.Department,
                          Program = student.Program,
                          Code = student.Code
                      }).Take(100).ToList();
        var js = new System.Web.Script.Serialization.JavaScriptSerializer();
        var result = js.Serialize(stud);
        return Json(result, JsonRequestBehavior.AllowGet);
    }

public class vt
{
    public string StudentNumber { get; set; }
    public string Name { get; set; }
    public string Faculty { get; set; }
    public string Department { get; set; }
    public string Program { get; set; }
    public string Code { get; set; }
}

我期望表格中显示列表中的各列，但它却抛出了这个错误：“DataTables警告：表格id=codetable - 请求未知参数'1'，第0行，第1列...”，并且只在第一列中显示结果（因此每行一个字符）。其余的列显示为空。 显示的错误

- Shagragada

---

完成你的代码。Atction，ajax，datatable渲染 - Siamak Ferdos

Answer 1

更新

我找到了一种更好的方法来使用AJAX从控制器获取源数据。请在您的DataTable网格中使用此方法：

为了通过AJAX在您的DataTable插件中显示数据，请按照以下步骤更改您的代码：

添加一个名为DataTable的模型

public class DataTable
{
    public List<vt> data { get; set; }
}

然后在你的控制器中：

public JsonResult GetVoters()
{
 DataTable dataTable = new DataTable();
 List<vt> stud = (from student in _context.Voters
                      select new vt
                      {
                          StudentNumber = student.StudentNumber,
                          Name = student.Name,
                          Faculty = student.Faculty,
                          Department = student.Department,
                          Program = student.Program,
                          Code = student.Code
                      }).Take(100).ToList();
    //The magic happens here
    dataTable.data = stud;
    return Json(dataTable, JsonRequestBehavior.AllowGet);
  }

最后，在您的视图中，使用此脚本填充您的DataTable：

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

        //For filtering:
        $('#codetable thead tr').clone(true).appendTo('#codetable thead');
        $('#codetable thead tr:eq(1) th').each(function (i) {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');

            $('input', this).on('keyup change', function () {
                if (table.column(i).search() !== this.value) {
                    table
                        .column(i)
                        .search(this.value)
                        .draw();
                }
            });
        });

        var table=$('#codetable').DataTable({
            "ajax": '@Url.Action("GetVoters", "Index")',
            "columns": [
                { "data": "StudentNumber" },
                { "data": "Name" },
                { "data": "Faculty" },
                { "data": "Department" },
                { "data": "Program" },
                { "data": "Code" }
            ]
        });
    });
</script>

还有一件事我差点忘了，为了你的过滤目的，也要改变你的HTML表格的结构：

<table class="table table-striped" id="codetable">
        <thead>
            <tr>
                <th>Student Number</th>
                <th>Student</th>
                <th>Faculty</th>
                <th>Department</th>
                <th>Program</th>
                <th>Code</th>
            </tr>
        </thead>
        <tbody></tbody>
</table>

我已经使用了DataTables，将AJAX对象作为您的网格的数据源。

祝好。

- Rahul Sharma

---

数据加载正常，谢谢。但是搜索和分页不起作用，尽管我已将bFilter设置为true。 - Shagragada

你需要明确地添加这些过滤器，其中也包括你的搜索条件。由于你将数据发送到服务器，所以你需要从列表中进行过滤和搜索。 - Rahul Sharma

@Shagragada 请查看更新后的答案，其中包括搜索和过滤功能，以及通过AJAX更好地初始化您的DataTable。 - Rahul Sharma

请为此发布一个新的问题。 - Rahul Sharma

数据对我来说无法加载，@Rahul Sharma，没有任何错误提示。 - vbhosale

请发布一个带有相关代码的新问题。 - Rahul Sharma

Answer 2

当我从API而不是控制器读取数据时，它也能正常工作。在这种情况下，DataTables保留了其默认的过滤、排序和分页功能。在调试时，API和控制器JsonResult返回的数据格式似乎是相同的。我真的无法解释为什么API可以工作而控制器却不能。

//The API Code

public IEnumerable<vt> GetStudents()
    {
        return _context.Voters.Select(x=>new vt { StudentNumber = x.StudentNumber, Name = x.Name, Faculty = x.Faculty, Department = x.Department, Program = x.Program, Code = x.Code }).ToList();
    }



//The only change in the jquery script is the url which now points to the API

<script>
$(document).ready(function () {
    $("#codetable").DataTable({
        processing: true,
        serverSide: true,
        info: true,
        ajax: {
            url: "/api/Students",
            dataSrc: ""
        },

        Columns: [
            { "data": "StudentNumber" },
            { "data": "Name" },
            { "data": "Faculty" },
            { "data": "Department" },
            { "data": "Program" },
            { "data": "Code" }
        ]
    });
});

- Shagragada

---

这个链接会让你很好地理解为什么在这种情况下API起作用：https://dev59.com/Kmkx5IYBdhLWcg3wA_xS - Rahul Sharma