如何修改DataTable中的行计数 [英] How to modify row counts in DataTables
问题描述
我正在使用 DataTables 创建一个能够动态过滤上下文的表格。我正在遵循基本示例,此处。
然而,我想进行一个自定义:要在我的表中显示字母表结果,每个字母表中都有一个标题行。例如:
A
- Apple
- Avocado
B
- 熊
- 按钮
C
- Car
我已经做到了成功(在服务器端使用 Django
模板化输出),但是脚本标签Datatables默认显示现在不正确,因为它计算标题行。在上面的例子中,它显示为:
显示8项中的1到8
/ pre>
应该如下:
显示1到5的5个条目。
进一步挖掘信息结果通过API访问为
language :{info:显示TOTAL条目的START到END,}
。
我有能力计数并保存标题行作为变量(例如
var headercount = 3
)从我的Django模板。
如何修改
START
,END
和TOTAL
在DataTables API中,以便在循环访问时在每个页面上都是准确的?解决方案
解决方案#1
您可以使用
infoCallback
选项来定义当表信息即将显示时将被调用的函数。
例如,可以使用下面的代码实现默认行为。
var table = $('#example')。DataTable({
infoCallback:function(settings,start,end,max,total,pre){
+ total +条目的+ start +显示+ end +
+((total!== max)?(+ max +总条目过滤): );
}
});
您需要相应调整数字,以避免计算标题。
请参阅此jsFiddle 进行代码和演示。
解决方案#2
替代解决方案是使用JavaScript而不是静态HTML将表格内容按字母顺序排列,类似于行分组示例。
然后,信息面板将包含自动添加正确的数字,因为标题行是动态添加的数据表不作为行计算的附加节点。
请参阅这个jsFiddle 代码和演示。
解决方案#3
使用 AlphabetSearch插件,请参阅 jQuery DataTables - 按字母顺序搜索代码和演示。
I am using DataTables to create a table that is able to dynamically filter context. I am following the basic example, here.
However, I want to make one customisation: To display alphabetised results in my table, with a "title row" for each alphabet letter. Eg:
A - Apple - Avocado B - Bear - Button C - Car
I have done this successfully (using
Django
templating on the server side for the output), but the footer label Datatables shows by default is now incorrect, because it counts the title rows. In the above example it reads:Showing 1 to 8 of 8 entries
When it should read:
Showing 1 to 5 of 5 entries.
Digging further, the info result is accessed via the API as
"language": {"info": "Showing START to END of TOTAL entries",}
.I have the ability to count and save the header rows as a variable (e.g.
var headercount = 3
) from my Django template.How do I modify the
START
,END
, andTOTAL
in the DataTables API so that they are accurate on every page when cycled through?解决方案SOLUTION #1
You can use
infoCallback
option to define a function that will be called when table information is about to be displayed.For example, default behavior can be achieved with the code below.
var table = $('#example').DataTable({ "infoCallback": function(settings, start, end, max, total, pre){ return "Showing " + start + " to " + end + " of " + total + " entries" + ((total !== max) ? " (filtered from " + max + " total entries)" : ""); } });
You need to adjust the numbers accordingly to avoid counting the headings.
See this jsFiddle for code and demonstration.
SOLUTION #2
Alternative solution would be to use JavaScript and not the static HTML to alphabetize table content, similarly to Row grouping example.
Then information panel would contain correct numbers automatically because header rows are added dynamically as additional nodes that are not counted by DataTables as rows.
See this jsFiddle for code and demonstration.
SOLUTION #3
Use AlphabetSearch plugin, see jQuery DataTables - Alphabetical search for code and demonstration.
这篇关于如何修改DataTable中的行计数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!