数据表版本1.10.21停留在ASP.NET Core 3.1中的“处理中”

分类：编程问答

如何解决数据表版本1.10.21停留在ASP.NET Core 3.1中的“处理中”

我在Datatable 1.10.21中使用ASP.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;
            }
        }

数据表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;
        }
    }

DtParameters 

[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...'

如您所见，我在处理方面陷入困境。可能是什么问题？

当我进行调试时，您可以看到草稿= 1：

enter image description here

enter image description here

当我将draw显式分配给1时，我收到一条消息，表明表中没有数据：

enter image description here

网址：“ / Home / Data？start = 0 && length = 10” 不返回任何数据：

/Home/Data?start=0&&length=10

以下是调试时的Length和Start：

enter image description here

查询：

query

结果：

result

纯数据：

pureData

解决方法

1。您需要确保Draw不能为0，当它为0时，您将停留在“处理中...”上。

2。在您的代码中，我找到了

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

和recordsFiltered类型应为整数。 这是an official link的参数。

3。您认为：

您需要更改

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

到

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

否则，名字和姓氏将不会被绑定。

这是一个可以进行假数据测试的工作演示：

控制器：

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",FirstName = "B",LastName = "B" },new Users { Id = "3",Age = "3",FirstName = "C",LastName = "C" } };
            return Ok(new { Draw = 1,recordsTotal = 10,recordsFiltered = users.Count(),data = users});
        }

结果： enter image description here

,

我通过将JsonSerializer添加到我的Startup.cs类中解决了该问题。那是我丢失的code的一行。

我在这里发布了解决方案： Datatables server-side processing in ASP.NET Core 3.1

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot