如何在显示按字母排序的搜索结果时修改行数

11

我正在使用 DataTables 创建一个能够动态过滤内容的表格。我正在遵循基本示例,在这里

然而,我想要进行一项自定义操作:在我的表格中显示按字母顺序排序的结果,并为每个字母添加一个“标题行”。例如:

A
- Apple
- Avocado
B
- Bear
- Button
C
- Car

我已成功完成了这个任务(在服务器端使用 Django 模板输出),但底部标签 Datatables 默认显示不正确,因为它计算了标题行。在上面的示例中,它读取如下内容:

Showing 1 to 8 of 8 entries 
当它应该阅读时:
Showing 1 to 5 of 5 entries.

深入挖掘后,信息结果可以通过API访问,如下所示:"language": {"info": "显示TOTAL条目中的START到END",}

我有能力将标题行计数并保存为变量(例如var headercount = 3)从我的Django模板中获取。

我该如何修改DataTables API中的STARTENDTOTAL,以便在循环浏览每个页面时它们是准确的?

1个回答

8

解决方案 #1

您可以使用infoCallback选项来定义一个函数,当表格信息即将显示时,该函数将被调用。

例如,可以通过以下代码实现默认行为。

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)" : "");
   }        
});

你需要根据需要调整数字,以避免计算标题。请参见this jsFiddle 获取代码和演示。
解决方法#2:另一种解决方法是使用JavaScript而不是静态HTML对表格内容进行字母排序,类似于Row grouping example。然后信息面板将自动包含正确的数字,因为标题行作为附加节点动态添加,DataTables不会将其计算为行。请参见this jsFiddle 获取代码和演示。
解决方法#3:使用AlphabetSearch plugin 添加对字母搜索的支持。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接