仅显示 10 行和 1 页的 JQuery 数据表和按钮被禁用上一个和下一个

Posted

技术标签:

【中文标题】仅显示 10 行和 1 页的 JQuery 数据表和按钮被禁用上一个和下一个【英文标题】:JQuery Datatables only showing 10 rows and 1 page and buttons are disabled previous and next 【发布时间】:2021-04-14 04:40:40 【问题描述】:

我正在使用 jquery 数据表来显示客户数据。我正在使用服务器端处理。但是我对如何使用 recordsFilteredProperty 有点困惑。当我将其设置为客户表的总数时,一切都显示正常,但是当我滚动到第 2 页时,没有预期的数据。但是,如果我将 recordsFiltered 更改为 result.Count,那么我将显示 10 个中的 1 个,并且只有一个页面显示用于分页,并且上一个和下一个按钮被禁用。

这是我的 MVC 代码:

public IActionResult GetCustomers(DataTableAjaxPostModel model)

    var totalCount = DatabaseLogic.GetCustomersCount();
    var filteredCount = totalCount;

    string sortBy = "";
    string sortDir = "";

    if (model.order != null)
    
        sortBy = model.columns[model.order[0].column].data;
        sortDir = model.order[0].dir.ToLower();
    
    
    totalCount = DatabaseLogic.GetCustomersCount();

    var search = model?.search?.value == "" ? "" :  model?.search?.value;

    int startRec = model.start;
    int pageSize = model.length;

    var result = DatabaseLogic.GetCustomers(startRec, pageSize, search, sortBy, sortDir);


    return Json(new  draw = model.draw, recordsTotal = totalCount, recordsFiltered = filteredCount, data = result );

数据表截图:

【问题讨论】:

如果这提供了一个快速的答案,您是否在official documentation 中看到了recordsTotalrecordsFiltered 的定义?这能解决问题吗?这些与startlength 的sent parameter 值一起用于构建您看到的分页信息和控件。如果仍然不清楚,也许更详细的示例可能会对您有所帮助。 是的,谢谢。但是问题来了,我将 start 和 length 传递给查询以仅返回该页面的那些记录,所以我必须有第二个查询来返回过滤后的行数? 这是一种方式。如果您将过滤和分页合并为一个(数据库?)操作,那么您将不知道过滤记录的总数。我这样做的方法是仅从数据库中过滤(和排序) - 然后根据分页要求从应用服务器的结果集中获取所需的切片。根据您的数据量,这可能是可接受的,也可能是不可接受的。 我迷路了,我做了一个单独的查询来返回过滤后的行减去 - 分页,仍然只有一个分页项,并且上一个和下一个按钮被禁用 单独的步骤是: (1) 从数据库中获取结果集。这包含与请求的过滤器匹配的所有数据,以及请求的排序顺序。步骤(2):在我的应用层,然后我处理这个结果集以提取需要发送到 DataTables 的特定 n 行(例如,第 3 页的 10 行)。因为我这样做了,所以我从步骤 (1) 中知道我有多少过滤记录。当然,我仍然需要(单独)检查条记录。 【参考方案1】:

在使用 DataTables 服务器端处理时,有几点需要考虑以正确处理分页控件和表信息摘要。下面介绍一种基本方法。

通过“分页控件”,我指的是“第一个”、“上一个”、“下一个”、“最后一个”和页码按钮。这些按钮的显示方式是 configurable - 但这里我将假设默认的 @987654326 @ 选项。

“表格信息摘要”是指如下文本:

Showing 21 to 30 of 57 entries

如果应用了过滤器,则等效文本:

Showing 1 to 10 of 21 entries (filtered from 57 total entries) 

这些消息也可以使用language.info 和language.infoFiltered 进行配置。


有 4 个服务器端处理值控制上述行为:

在参数sent from DataTables给服务器:

start - 要在表中显示的第一条记录的(从零开始的)索引。 length - 可以在一页中显示的记录总数,通常由长度更改下拉菜单控制。

在从服务器发送到DataTables的参数中(连同我们要显示的十条记录):

recordsTotal - 未过滤数据集中的记录总数(例如,这可能是源数据库表的行数)。 recordsFiltered - 应用任何过滤器后源数据集中的记录数。过滤器是 DataTables 搜索输入字段中提供的过滤器。如果没有过滤器,或者过滤器不影响任何行,则此值将等于 recordsTotal

所以,如果 start = 20 和 length = 10,这意味着我们希望 DataTables 显示整个数据集(即第二页)中的第 21 到 30 行。因此,服务器会将这十条记录的特定集合发送回 DataTables 以进行显示。

如果recordsTotal = 123,但过滤后只有77条相关记录,那么recordsFiltered = 77。


但是,为了有效地使用上述数据,服务器还必须考虑 DataTables 中的任何列排序设置。此信息也包含在sent parameters 数据中,使用order[i][column] 字段。

因此,服务器必须构建一个按请求过滤和排序的结果集。

此结果集中的记录数为recordsFiltered 值。

结果集已排序这一事实允许服务器从结果集中选择正确的显示数据子集,如startlength 值所指定的那样。正是这个特定的数据片段在从服务器到 DataTables 的 JSON 响应中返回。

(这也是 DataTables 在使用服务器端处理时可以处理数百万条记录的原因:对于每次渲染/绘图,它只接收整体数据的一小部分。)


这留下了一个空白:recordsTotal 的值是多少?如何确定这取决于具体的服务器端实现过程。

一种方法可能如下:

    服务器构建一个 SQL 选择语句来检索排序和过滤的数据。 应用服务器层提取所需的显示数据子集。

在这种情况下,应用服务器需要发出第二条 SQL 语句来统计未过滤记录的总数。这给了我们recordsTotal 值。

如果“两个查询”方法不实用,可能会有替代的实现方法。但是,上述方法将确保分页和信息功能按预期运行。

【讨论】:

我还有一个问题。我必须得到过滤行的计数,这需要再次调用数据库。即使我将它包含在程序中,当数据集变大时肯定会减慢它的速度?这种减速实际上会使情况变得更糟还是更好?我现在说的是所有服务器端,而不是客户端,我知道您必须为数据表取回过滤器行,但是肯定两次调用或一次调用带有两个查询甚至一个 out 参数会减慢它的速度,而不仅仅是一次调用然后让 linq剩下的呢?例如,我有一个查询来获取 5 行,然后有一个查询来计算所有过滤的行? 我说的是默认视图甚至是你过滤的几个,它对数据库的两次调用无论如何,所以你可以在数据库过程中分页你想要的,但你仍然需要做另一个查询来获取过滤记录的计数。如果我有 500 万行并且我过滤到 10000 行,那么在使用分页时有一个过程很好,但我必须有另一个查询来获取过滤行的计数,即 10000。@andrewjames 明白。如果您的服务器端方法是只返回将显示给用户的数据库中的 10 个分页行,那么,是的,您必须做额外的(并且可能是重复的)工作来计算“过滤器中的总数”数量。这是您在选择如何实现服务器端处理时做出的权衡之一。我的方法是假设过滤是最昂贵的步骤 - 这就是为什么在我的答案的最后一部分中我检索所有 10,000 条过滤记录,即使我只显示 10 条(并且额外的“总计”计数是一个快速查询)。 当然,无论您采用哪种方法,您的数据库都需要经过良好调整以支持您的过滤器查询。而且您可能需要考虑用户提供的过滤条件非常广泛的风险,这些条件基本上选择“一切”...... 好的,谢谢。我主要是在谈论默认视图,所以首先返回所有记录,你能估计一下记录数会减慢多少吗?

以上是关于仅显示 10 行和 1 页的 JQuery 数据表和按钮被禁用上一个和下一个的主要内容,如果未能解决你的问题,请参考以下文章

使用jquery动态添加和删除表中的行和列

jQuery动态添加行和根据已有数据动态添加行

jQuery tablesorter 仅对子行分组小计

使用 jquery 仅显示数据库中的最新行

限制bootstrap 3分页中显示的页数

在 jquery 数据表中分页后保留文本框值