创建一个按字母顺序排序和搜索的表

Question

我想创建一个表格（使用字母过滤和搜索），例如this(example)。通过单击任何字母表，显示仅以该字母开头的名称。并且还有一个搜索选项。

我在google上搜索了很多但却找不到那样的表格。任何人都知道如何获得那张桌子。

Answer 1

在信件点击和搜索事件中，您应该在数据集上运行JS过滤器功能，并仅显示相关数据。

过滤功能的一个简单例子：

function filterByProperty(data, prop, searchString) {
    return data.filter(function(singleObject) {
        return singleObject[prop].indexOf(searchString) === 0;
    });
 }

 var dataSet = [
     {
         name: "Amanda",
         company: "Google"
     }, 
     {
         name: "Johnny",
         company: "Facebook"
     },
     { 
         name: "Max",
         company: "Go Daddy"
     }
 ];

 // Will return a collection containing the first and third objects in dataSet.
 var filteredData = filterByProperty(dataSet, "company", "G");

Answer 2

它使用了一个名为：DataTable的插件，您可以按照此处的指南进行自己的字母搜索。

https://www.datatables.net/blog/2014-08-26

没有足够的声誉发表评论，所以......

Answer 3

来自Chrome开发者（Press F12 -> click on Network tab & reload the page）工具

我看到dynamic-table.js（不确定这是图书馆还是自定义文件）＆amp;

使用

jquery.dataTables.js。所以你可以看看这些库

Answer 4

我通过下面提供的链接找到了我的问题的解决方案。

SOLUTION IS HERE

  

注意：在此解决方案中，只有字母过滤器可用，搜索功能不存在。搜索功能对我来说并不重要，所以我只使用字母过滤器。