Как загрузить данные в datatable с помощью ajax в mvc

ОБНОВЛЕНИЕ

Я нашел лучший способ использовать AJAX для ваших исходных данных из контроллера. Используйте этот метод для своей сетки DataTable с AJAX:

Чтобы отображать данные через 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 в качестве источника данных для вашей сетки.

Ваше здоровье.

Это также сработало, когда я прочитал данные из 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" }
        ]
    });
});