Material-UI的DataTables分頁不起作用

Question

我定義了一個顯示一些推薦產品的表：

<DataTables
     height={'auto'}
     selectable={false}
     showRowHover={true}
     columns={RECOMMENDED_TABLE_COLUMNS}
     data={this.state.products}
     showCheckboxes={false}
     rowSizeLabel="Filas por página"
     page={1}
     rowSize={10}
     rowSizeList={[10,20,30,50]}
       />

被調用的表如下：

const RECOMMENDED_TABLE_COLUMNS = [
    {
        key: 'name',
        label: 'Producto',
        style:{width: '65%'}
    }, {
        key: 'price',
        label: 'Precio del producto',
        style:{width: '35%'},
        render: (amount) => {
            return amount + ' ' + currencyToAppend;
        }
    }
];

數據來自此功能：

getProducts(){
        fetch(
            DOMAIN+'/api/products/', {
                method: 'get',
                dataType: 'json',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization':'Bearer '+this.props.token
                }
            })
            .then((response) => response.json())
            .then((responseData) => {
                responseData.map((value)=>{
                    if(value.brand)value.brand=value.brand.name;
                    if(value.price)value.priceFormatted=value.price.toFixed(2).toString().replace('.',',')+' €';
                    return true;
                });
                this.setState({products:responseData})
            })
            .catch(function(e) {
                console.log(e);
            });
    }

稱為：

handleCellClick(y,x,row){
        this.setState({
            open:true,
            slideIndex: 0,
            newForm:false,
            customer:{...row}
        });
        this.getProfiles();
        this.getHistory();
        this.getProducts();
    }

我可以在表格中打印我想要的所有產品：

當我想對它進行分頁時，就會出現問題，每頁顯示10個產品，它僅顯示數據庫中的所有產品：

我正在使用的軟件包如下： MATERIAL-UI軟件包

我究竟做錯了什么？ 我是否放棄了DataTables內部的任何屬性？

編輯@abdul：

當我單擊箭頭時，下一頁和上一頁可以工作，但是沒有任何變化。 它會繼續在單個頁面中顯示數據庫中的所有72個結果。

捕獲縮小（捕獲是從列表的底部開始，但是我可以向上滾動到頂部，顯示其余結果）：

Answer 1

您給它一個固定的page=1 ，該page=1將始終位於第1頁。相反，請在初始狀態下定義一個頁面，例如

this.state = {
      page: 1
};

然后，您應該使用onNextPageClick和onPreviousPageClick屬性。

理想情況下，您的組件應如下所示

class MyTable extends Component {

    constructor(props, context) {
    super(props, context);

     this.handlePreviousPageClick = this.handlePreviousPageClick.bind(this);
     this.handleNextPageClick = this.handleNextPageClick.bind(this);

      this.state = {
         page: 1
      };
   }

handlePreviousPageClick() {
    var currentPage = this.state.page
    this.setState({
      page: currentPage-1,
    });
  }

  handleNextPageClick() {
    var currentPage = this.state.page
    this.setState({
      page: currentPage + 1,
    });
}

//other handlers 
<DataTables
     page={this.state.page}
     onNextPageClick={this.handleNextPageClick}
     onPreviousPageClick={this.handlePreviousPageClick} 
     //the properties you already have
               />
}

Answer 2

我認為未顯示選定的特定行數的原因在於呈現行的方式。 分頁和表格未連接，請詳細查看文檔演示代碼：

        <TableBody>
          {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => (
            <TableRow key={row.id}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
            </TableRow>
          ))}
          {emptyRows > 0 && (
            <TableRow style={{ height: 48 * emptyRows }}>
              <TableCell colSpan={6} />
            </TableRow>
          )}
        </TableBody>

row.slice用於根據分頁來調整行數的大小。 我希望這有幫助。