首頁  >  問答  >  主體

如何取得TantStack表的目前Page Index

<p>我正在使用 TantStack 和 React Table 庫建立一個表。我想在表頁腳中顯示目前頁面索引,例如“第 1 頁,共 8 頁”,其中“1”表示當前頁碼,“8”是總頁數。我無法弄清楚如何從 TantStack 表狀態存取當前頁面索引。 </p> <p>它應該放置在這些按鈕之間:</p> <pre class="brush:php;toolbar:false;"><Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()} > Previous </Button> <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()} > Next </Button></pre></p>
P粉909476457P粉909476457433 天前561

全部回覆(1)我來回復

  • P粉187160883

    P粉1871608832023-09-03 09:31:11

    您需要將頁面索引儲存在狀態變數中,並將 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)
      }));

    回覆
    0
  • 取消回覆