Блог

У меня более миллиона строк, и я хочу отобразить их в material-table reactjs. Как мне получить данные из серверной части только для строк на одной странице, а затем получить следующий набор строк при нажатии на следующую страницу?

 import React, { useState, useEffect } from 'react';
import MaterialTable from 'material-table';
import Axios from 'axios'

export default function MaterialTableDemo() {
    var columns = [
        {title: "stationid", field: "stationid", editable: 'never'},
        {title: "model", field: "model", editable: 'never'},
        {title: "version", field: "version", editable: 'never'},
        {title: "lat", field: "lat", editable: 'never'},
        {title: "lon", field: "lon", editable: 'never'},
        {title: "status", field: "status"}
      ]
    
    const [data, setData] = useState([]);
useEffect(() => { 
    Axios.get("/ListView")
        .then(res => {               
            setData(res.data.data)
            console.log(res.data.data)
         })
         .catch(error=>{
             console.log("Error")
         })
  }, [])

    const handleRowUpdate = (newData, oldData, resolve) => {console.log("updating row")
    let errorList = []
    if(newData.status === ""){
        errorList.push("Please enter Status")
      } 

    if(errorList.length < 1){
      Axios.post("/update", newData)
      .then(res => {
        const dataUpdate = [...data];
        const index = oldData.tableData;
        dataUpdate[index] = newData;
        setData([...dataUpdate]);
        resolve()}
)
      .catch(error => {
resolve()

      })
    }else{
resolve()

    } 
    window.location.reload(true);
  }
const handleRowDelete = (oldData, resolve) => {

    Axios.post("/delete", oldData)
      .then(res => {
        const dataDelete = [...data];
        const index = oldData.tableData;
        dataDelete.splice(index, 1);
        setData([...dataDelete]);
        resolve()
      })
      .catch(error => {
        resolve()
      })
      window.location.reload(true);
  } 

return (
    <MaterialTable
    title="Station MetaData from DB"
      columns={columns}
      data={data}
      options={{
          exportButton: true,
          showFirstLastPageButtons: false,
      }}
      localization={{
        pagination: {
            labelDisplayedRows: '{from}-{to}'
        },
      }}
      editable={{
onRowUpdate: (newData, oldData) =>
        new Promise((resolve) => {
            handleRowUpdate(newData, oldData, resolve);

        }),
        onRowDelete: (oldData) =>
        new Promise((resolve) => {
          handleRowDelete(oldData, resolve)
        }),
      }}
    />
  );
}
  

Как мне заставить получать только как можно больше строк из серверной части на 1 странице для отображения? Например, если я хочу отображать только 5 строк на странице, тогда я должен получить только 5 строк из серверной части и при нажатии на следующую страницу получить следующие 5 строк.

Я знаю, что это немного поздно, но, возможно, это поможет другим с тем же вопросом. Вы должны переопределить разбивку на страницы в компонентах:

 <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.