使用服务器端分页处理在jquery.datatables中不显示记录

时间:2018-06-05 16:17:15

标签: mvc.jquery.datatables

我试图让jquery.datatables使用服务器端处理和分页。我使用以下示例文章作为指南,因为它接近我使用的版本VS2017-

https://www.c-sharpcorner.com/article/filtering-jquery-data-table-server-side-using-mvc-and-entity-framework/

当我运行应用程序时,我收到以下错误:

DataTables警告:table id = tblrtr - 第0行第0列请求的未知参数“Id”。有关此错误的详细信息,请参阅http://datatables.net/tn/4

和一个显示10个空白行和右页数的空网格。

我调试了代码,它找到了所有记录和值,而且finalresult变量确实返回了10行的内容 - 但它们似乎没有进入数据表网格。

这是控制器代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
using RTMGMTTest.Models;

namespace RTMGMTTest.Controllers
{
    public class ReportsToRecordsController : Controller
    {
        private readonly RTMGMTContext _context;

        public ReportsToRecordsController(RTMGMTContext context)
        {
            _context = context;
        }

        // GET: ReportsToRecords
        public async Task<IActionResult> Index()
        {
            //return View(await _context.ReportsToRecords.ToListAsync());
            return View();
        }


        [HttpPost]
        public JsonResult RTRList(DTParameters param)
        {

            int TotalCount = 0;
            var filtered = this.GetRTRFiltered(param.Search.Value, param.SortOrder, param.Start, param.Length, out TotalCount);

            var RTRList = filtered.Select(o => new ReportsToRecords()
            {

                Id = o.Id,
                ReportingId = o.ReportingId,
                Title = o.Title,
                Name = o.Name,
                ReportsToId = o.ReportsToId,
                EmployeeId = o.EmployeeId
            });



            DTResult<ReportsToRecords> finalresult = new DTResult<ReportsToRecords>
            {
                draw = param.Draw,
                data = RTRList.ToList(),
                recordsFiltered = TotalCount,
                recordsTotal = filtered.Count

            };

            return Json(finalresult);

        }

//用于服务器端处理

public List<ReportsToRecords> GetRTRFiltered(string search, string sortOrder, int start, int length, out int TotalCount)
{


    var result = _context.ReportsToRecords.Where(p => (search == null 
        || (p.ReportingId != null && p.ReportingId.ToLower().Contains(search.ToLower())
        || p.Title != null && p.Title.ToLower().Contains(search.ToLower())
        || p.Name != null && p.Name.ToLower().Contains(search.ToLower())
        || p.ReportsToId != null && p.ReportsToId.ToLower().Contains(search.ToLower())
        || p.EmployeeId!= null && p.EmployeeId.ToLower().Contains(search.ToLower())
        ))).ToList();

    TotalCount = result.Count;

    result = result.Skip(start).Take(length).ToList();


    switch (sortOrder)
    {
        case "ReportingId":
            result = result.OrderBy(a => a.ReportingId).ToList();
            break;
        case "Title":
            result = result.OrderBy(a => a.Title).ToList();
            break;
        case "Name":
            result = result.OrderBy(a => a.Name).ToList();
            break;
        case "ReportsToId":
            result = result.OrderBy(a => a.ReportsToId).ToList();
            break;
        case "EmployeeId":
            result = result.OrderBy(a => a.EmployeeId).ToList();
            break;
        default:
            result = result.AsQueryable().ToList();
            break;
    }
    return result.ToList();
}

视图页面如下所示:

@model IEnumerable<RTMGMTTest.Models.ReportsToRecords>

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    <a asp-action="Create">Create New</a>
</p>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<script>

    $(document).ready(function () {

        if ($.fn.DataTable.isDataTable('#tblrtr')) {
            $('#tblrtr').dataTable().fnDestroy();
            $('#tblrtr').dataTable().empty();

        }

        var complete = $('#tblrtr').DataTable(
            {
                "serverSide": true,
                "destroy": true,
                "processing": true,
                "ajax":
                    {
                        url: "/ReportsToRecords/RTRList",
                        method: "POST"
                    },
                "columns": [
                    { "data": "Id"},
                    { "data": "ReportingId" },
                    { "data": "Title" },
                    { "data": "Name" },
                    { "data": "ReportsToId" },
                    { "data": "EmployeeId" }

                ]
            }

        );

        /// Following code is for filter input to apply filter only on Enter
        var itm = $("#tblrtr_filter input")

        itm.unbind();
        itm.keyup(function (e) {
            //enter or tab
            if (e.keyCode == 13) {
                complete.search(this.value).draw();
            }
        });


    });
</script>
<table class="table" id="tblrtr">
    <thead>
        <tr>
            <th>
                Id
            </th>
            <th>
                ReportingId
            </th>
            <th>
                Title
            </th>
            <th>
                Name
            </th>
            <th>
                ReportsToId
            </th>
            <th>
                EmployeeId
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

有谁知道什么会导致控制器返回的数据不显示并导致产生的消息?感谢。

0 个答案:

没有答案