来自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 PACKAGE

我做错了什么？我是否放弃了 DataTables 中的任何属性？

编辑@abdul：

当我单击箭头时，下一页和上一页工作，但没有任何变化；它继续在单个页面中显示来自数据库的所有 72 个结果。

捕获缩小（捕获从列表底部开始，但我可以向上滚动到顶部，显示其余结果）：

Answer 1

我认为它未显示特定选定行数的原因在于您呈现行的方式。 分页和表格没有连接，详细查看文档演示代码：

        <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 旨在根据您的分页调整行数。 我希望这会有所帮助。

Answer 2

你给它一个固定的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 3

在他们提供的https://material-ui.com/components/tables/ 页面上

<TablePagination
    rowsPerPageOptions={[10, 25, 100]}
    component="div"
    count={rows.length}
    rowsPerPage={rowsPerPage}
    page={page}
    onPageChange={handleChangePage}
    onRowsPerPageChange={handleChangeRowsPerPage}
  />

只需将最后两行改为

onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}