显示字母搜索结果时如何修改行数 [英] How to modify row counts when displaying alphabetized search results

问题描述

我正在使用 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插件，它增加了对字母搜索的支持。
 
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, and TOTAL 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 which adds support for alphabetical search.

                        
这篇关于显示字母搜索结果时如何修改行数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！