所有行的分页标签

Question

我的分页如下：-

现在它有选项 10、25、50，我又为所有行添加了一个，因为我总共有 1000 行，我希望在不转到多页 20 次的情况下查看这些行。所以我包括 data.length 现在给我输出如下：-

我的代码是：-

            <select value={pageSize} onChange={e => setPageSize(Number(e.target.value))}>
              {[10, 25, 50, data.length].map(pageSize =>(
                <option key ={pageSize} value={pageSize}>
                  Show {pageSize}
                </option>
              ))}

我需要为 data.length 选择一个标签，而不是上面屏幕截图中显示的数字。谁能帮忙。

Answer 1

你可以写条件，如果data.length等于pageSize你显示文本All否则pageSize.

示例：

{[10, 25, 50, data.length].map((pageSize) => (
          <option key={pageSize} value={pageSize}>
            Show {data.length === pageSize ? "All" : pageSize}
          </option>
        ))}

codesandbox

所有行的分页标签

Pagination label for all rows

pagination

reactjs