如何获取TantStack表的当前Page Index
P粉909476457
P粉909476457 2023-09-02 12:11:52
[React讨论组]
<p>我正在使用 TantStack 和 React Table 库构建一个表。我想在表页脚中显示当前页面索引,例如“第 1 页,共 8 页”,其中“1”表示当前页码,“8”是总页数。我无法弄清楚如何从 TantStack 表状态访问当前页面索引。</p> <p>它应该放置在这些按钮之间:</p> <pre class="brush:php;toolbar:false;">&lt;Button variant=&quot;outline&quot; size=&quot;sm&quot; onClick={() =&gt; table.previousPage()} disabled={!table.getCanPreviousPage()} &gt; Previous &lt;/Button&gt; &lt;Button variant=&quot;outline&quot; size=&quot;sm&quot; onClick={() =&gt; table.nextPage()} disabled={!table.getCanNextPage()} &gt; Next &lt;/Button&gt;</pre></p>
P粉909476457
P粉909476457

全部回复(1)
P粉187160883

您需要将页面索引存储在状态变量中,并将 setState 方法传递给 tanstack 表以设置当前页面索引。您可以尝试以下代码:

const [state, setState] = useState(table.initialState);

  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10
  });

  const pagination = useMemo(
    () => ({
      pageIndex,
      pageSize
    }),
    [pageIndex, pageSize]
  );

  // override the state managers for the table
  table.setOptions(prev => ({
    ...prev,
    onStateChange: setState,
    state: {
      ...state,
      pagination,
    },
    onPaginationChange: setPagination,
    pageCount: Math.ceil(numOfRows / pageSize)
  }));
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号