数据表版本 1.10.21 卡在“正在处理...”在 ASP.NET Core 3.1 中 [复制]

Datatable version 1.10.21 is stuck on 'processing...' in ASP.NET Core 3.1 [duplicate]

提问人:Russell Chidhakwa 提问时间:10/15/2020 最后编辑:Russell Chidhakwa 更新时间:10/16/2020 访问量:885

问:

我正在使用 in,我被困在“处理...”上。如果发生异常,我正在捕获异常,但到目前为止,我还没有看到任何异常。由于我不知道的原因,数据库记录不显示。Datatable 1.10.21ASP.NET Core 3.1

您能否抽出一点时间仔细查看我的代码,以确定我哪里出错了并指出。感谢您为解决这个问题所花费的时间和精力。

这是我的代码:

我的 HTML 表格:

@model IEnumerable<Users>
<div class="table-responsive">
    <table class="table table-bordered table-hover" id="myTable">
        <thead>
            <tr>
                <th>@Html.DisplayNameFor(model => model.Id)</th>
                <th>@Html.DisplayNameFor(model => model.FirstName)</th>
                <th>@Html.DisplayNameFor(model => model.LastName)</th>
                <th>@Html.DisplayNameFor(model => model.Country)</th>
                <th>@Html.DisplayNameFor(model => model.Gender)</th>
                <th>@Html.DisplayNameFor(model => model.Age)</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>@Html.DisplayNameFor(model => model.Id)</th>
                <th>@Html.DisplayNameFor(model => model.FirstName)</th>
                <th>@Html.DisplayNameFor(model => model.LastName)</th>
                <th>@Html.DisplayNameFor(model => model.Country)</th>
                <th>@Html.DisplayNameFor(model => model.Gender)</th>
                <th>@Html.DisplayNameFor(model => model.Age)</th>
            </tr>
        </tfoot>
    </table>
</div>

型号等级:

public class Users
{
    public string Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Country { get; set; }
    public string Gender { get; set; }
    public string Age { get; set; }
}

数据表初始值设定项:

$(document).ready(function () {
    $('#myTable').DataTable(
        {
            // ServerSide Setups
            processing: true,
            serverSide: true,

            // Paging Setups
            paging: true,

            // Searching Setups
            searching: { regex: true },

            // Ajax Filter
            ajax: {
                url: "/Home/Data",
                type: "GET",
                contentType: "application/json",
                dataType: "json",
                data: function (d) {
                    return JSON.stringify(d);
                }
            },
            // columns setups
            columns: [
                { data: "id" },
                { data: "firstname" },
                { data: "lastname" },
                { data: "country" },
                { data: "gender" },
                { data: "age" }
            ]
        });
});

以 JSON 格式获取数据:

[HttpGet]
        public async Task<IActionResult> Data(DataTablesResult tableParams)
        {
            try
            {
                var query = context.AspNetUsers.AsQueryable();

                var totalCount = await query.CountAsync();

                if (tableParams.Search != null)
                    query = query.Where(c => c.FirstName.Contains(tableParams.Search.Value)
                    || c.LastName.Contains(tableParams.Search.Value));
                //Other search queries goes here

                if (tableParams.Order.Count > 0)
                {
                    if (tableParams.Order[0].Dir == "asc")
                        query = query.OrderBy(c => EF.Property<string>(c, tableParams.Columns[tableParams.Order[0].Column].Name));
                    else
                        query = query.OrderByDescending(c => EF.Property<string>(c, tableParams.Columns[tableParams.Order[0].Column].Name));
                }
                //In this example multi order is disabled so we can order by any column dynamically

                var result = await query.AsNoTracking().Select(E => new { Count = query.Count(), E = E }).Skip(tableParams.Start).Take(tableParams.Length).ToListAsync();
                var pureData = result.Select(E => E.E);

                if (result.Count == 0)
                    return Ok(new { tableParams.Draw, recordsTotal = 0, recordsFiltered = 0, data = Enumerable.Empty<string>() });

                return Ok(new { tableParams.Draw, recordsTotal = totalCount, recordsFiltered = result.Select(c => c.Count).FirstOrDefault(), data = pureData });
            }
            catch (Exception ex)
            {
                ex.Message.ToString();

                throw;
            }
        }

Datatable ModelBinder 类:

public class DataTableModelBinder : IModelBinder
    {
        public Task BindModelAsync(ModelBindingContext bindingContext)
        {
            var request = bindingContext.HttpContext.Request;

            // Retrieve request data
            var draw = Convert.ToInt32(request.Query["draw"]);
            var start = Convert.ToInt32(request.Query["start"]);
            var length = Convert.ToInt32(request.Query["length"]);

            // Search
            var search = new Search
            {
                Value = request.Query["search[value]"],
                Regex = Convert.ToBoolean(request.Query["search[regex]"])
            };

            // Order
            var o = 0;
            var order = new List<ColumnOrder>();
            while (!StringValues.IsNullOrEmpty(request.Query["order[" + o + "][column]"]))
            {
                order.Add(new ColumnOrder
                {
                    Column = Convert.ToInt32(request.Query["order[" + o + "][column]"]),
                    Dir = request.Query["order[" + o + "][dir]"]
                });
                o++;
            }

            // Columns
            var c = 0;
            var columns = new List<Column>();
            while (!StringValues.IsNullOrEmpty(request.Query["columns[" + c + "][name]"]))
            {
                columns.Add(new Column
                {
                    Data = request.Query["columns[" + c + "][data]"],
                    Name = request.Query["columns[" + c + "][name]"],
                    Orderable = Convert.ToBoolean(request.Query["columns[" + c + "][orderable]"]),
                    Searchable = Convert.ToBoolean(request.Query["columns[" + c + "][searchable]"]),
                    Search = new Search
                    {
                        Value = request.Query["columns[" + c + "][search][value]"],
                        Regex = Convert.ToBoolean(request.Query["columns[" + c + "][search][regex]"])
                    }
                });
                c++;
            }

            var result = new DataTablesResult
            {
                Draw = draw,
                Start = start,
                Length = length,
                Search = search,
                Order = order,
                Columns = columns
            };

            bindingContext.Result = ModelBindingResult.Success(result);
            return Task.CompletedTask;
        }
    }

Dt参数:

[ModelBinder(BinderType = typeof(DataTableModelBinder))]
    public class DataTablesResult
    {
        public int Draw { get; set; }
        public int Start { get; set; }
        public int Length { get; set; }
        public Search Search { get; set; }
        public List<ColumnOrder> Order { get; set; }
        public List<Column> Columns { get; set; }
    }

    public class Search
    {
        public string Value { get; set; }
        public bool Regex { get; set; }
    }

    public class Column
    {
        public string Data { get; set; }
        public string Name { get; set; }
        public bool Searchable { get; set; }
        public bool Orderable { get; set; }
        public Search Search { get; set; }
    }

    public class ColumnOrder
    {
        public int Column { get; set; }
        public string Dir { get; set; }
    }

生成和运行的结果: Stuck on 'processing...'

正如你所看到的,我被困在处理上。可能是什么问题?

当我调试时,您可以看到 DRAW 为 = 1: enter image description here enter image description here

当我显式将 draw 分配给 1 时,我收到一条消息,指出表中没有数据: enter image description here

url: “/Home/Data?start=0&&length=10” 不返回任何数据:/Home/Data?start=0&&length=10

以下是调试时的长度开始时间: enter image description here

查询: query

结果: result

pureData: pureData

json asp.net-core datatables 服务器端

评论


答:

1赞 Yiyi You 10/15/2020 #1

1.您需要确保不能为 0,当它为 0 时,您将卡在“正在处理...”。Draw

2.In 你的代码,我发现

return Ok(new { tableParams.Draw, recordsTotal = totalCount, recordsFiltered = result.Select(c => c.Count).FirstOrDefault(), data = pureData });

type 应为整数。 这是关于参数的官方链接recordsFiltered

3.In 您的观点:

你需要改变

columns: [
                { data: "id" },
                { data: "firstname" },
                { data: "lastname" },
                { data: "country" },
                { data: "gender" },
                { data: "age" }
            ]

columns: [
                    { data: "id" },
                    { data: "firstName" },
                    { data: "lastName" },
                    { data: "country" },
                    { data: "gender" },
                    { data: "age" }
                ]

否则,FirstName 和 LastName 将不会绑定。

下面是一个带有假数据的工作演示,可以测试:

控制器:

public async Task<IActionResult> Data(DataTablesResult tableParams)
        {
            
            List<Users> users = new List<Users> { new Users { Id = "1", Age = "1", Country = "UK", Gender = "Male", FirstName = "A", LastName = "A" },
                new Users { Id = "2", Age = "2", Country = "UK", Gender = "Male", FirstName = "B", LastName = "B" },
                new Users { Id = "3", Age = "3", Country = "UK", Gender = "Male", FirstName = "C", LastName = "C" } };
            return Ok(new { Draw = 1, recordsTotal = 10, recordsFiltered = users.Count(), data = users});
        }

结果:enter image description here

评论

0赞 Samuel Liew 10/16/2020
评论不用于扩展讨论;此对话已移至 Chat
1赞 Russell Chidhakwa 10/16/2020 #2

我已经通过向我的类添加 a 解决了这个问题。这是我缺少的那一行。JsonSerializerStartup.cscode

我在这里发布了解决方案: ASP.NET Core 3.1 中的 Datatables 服务器端处理