Question

我有超过一百万行，并希望在材料表reactjs中显示它们。如何仅从后端获取一页上的行的数据，然后在下一页单击上获取下一组行？

select to_date(round(my number / 100), 'yyyymmdd') as mydate 
from mytable

如何使从后端的行尽可能多地在1页上显示？例如，如果我希望每页仅显示5行，那么我应该从后端仅获得5行，然后单击下一页就获得接下来的5行。

Answer 1

我知道有点晚了，但也许会对其他人有同样的问题。您应该在组件中覆盖分页：

<MaterialTable
        options={options}
        data={data}
        columns={columns}
        editable={{onRowUpdate}}
        localization={localization}
        components={{
            Pagination: (props) =>  
                <CustomPagination
                    props={props}
                    rowsPerPage={pageSize}
                    pageIndex={pageIndex}
                    setPageIndex={setPageIndex}
                    setPageSize={setPageSize}/>
            }
        }}
    />

其中

<CustomPagination
        rowsPerPageOptions={rowsPerPageOptions}
        rowsPerPage={rowsPerPage}
        count={totalPages}
        page={pageIndex}
        onChangePage={(event, page) => {
            props.onChangePage(event, page);
            setPageIndex(page)
        }}
        onChangeRowsPerPage={event => {
            props.onChangeRowsPerPage(event);
            setPageSize(parseInt(event.target.value));
        }}
    />

CustomPagination中的所有字段都是其父组件的钩子，以便您进行api调用并在它们更改时重新呈现。

使用与更改此按钮的文本相同的方式，请检查示例https://material-table.com/#/docs/features/localization。

如何从物料表reactjs覆盖MTablePagination？

1 个答案: