如何对表格进行分页并同时搜索所有内容？答案

【问题标题】：How can I paginate my table and search trough everything at the same time?如何对表格进行分页并同时搜索所有内容？
【发布时间】：2019-04-23 13:03:51
【问题描述】：

我有一个总览表，在这里我列出了我的所有元素。但是我对它们进行了分页，以便只显示 10 个元素。

我的桌子是这样的：

<el-table
  :data="paginatedData.filter(data => !search || data.tool_name.toLowerCase().includes(search.toLowerCase()))"
  border
  fit
  highlight-current-row>
  <!-- table content -->
</el-table>

基本上 paginatedData 包含 10 个元素。变量“工具”包括所有可用的元素。

我想保留分页，但同时我需要搜索工具的每个元素，而不仅仅是我的 paginatedData 中的 10 个。

所以我尝试将其更改为：

<el-table
  :data="paginatedData.filter(tools => !search || tools.tool_name.toLowerCase().includes(search.toLowerCase()))"
  border
  fit
  highlight-current-row>
  <!-- table content -->
</el-table>

我想我只是有一些问题要找到正确的语法来解决我的问题。

希望你们有一个想法......

【问题讨论】：

标签： javascript node.js element-ui

【解决方案1】：

本例中有三个级别的数据：

未经过滤的数据集；
已根据您的搜索词过滤的数据集（假设正在使用搜索词，否则这将等于未过滤的数据集）；和
分页数据，您希望将其拆分为每包十个条目。

这建议您应该使用四个变量：

const data：具有至少一个属性的对象数组，tool_name
let filteredData：上面的一个子集，经过过滤使得tool_name.toLowerCase() === search.toLowerCase()
let currentPageData：过滤数据的子集，其中项目的索引对应于当前页面，即第 1 页 = 索引为 0-9 的条目，第 2 页 = 索引为 10-19 的条目等。
let currentPage: number 存储当前页面的变量。

在初始页面加载时，您希望将 currentPage 初始化为 1。因此，填充表格的逻辑是：

<el-table
  :data="currentPageData"
  border
  fit
  highlight-current-row>
  <!-- table content -->
</el-table>

在哪里

filteredData = !search ? data : data.filter((entry) => entry.tool_name.toLowerCase() === search.toLowerCase())
currentPageData = filteredData.filter((entry, index) => (index < (currentPage * 10) - 1 && index > ((currentPage - 1) * 10)))

即如果有搜索，则根据它过滤您的过滤数据，否则过滤数据仅设置为数据。 currentPageData 然后使用 currentPage 变量提取与当前所选页面对应的十个条目。我假设您可以处理如何向表格添加按钮以选择不同的页面。

显然，这不是一个完全有效的解决方案，但应该提供一些如何实施的想法。

【讨论】：