Question

我有一个动态的物化表，需要分页。我试过使用物化分页并将其与表链接，但没有用..也尝试过使用jQuery，但每个人都建议不要。我知道备用反应表，但是出于重量原因，我实际上只是在尝试仅使用materializeCss。有什么帮助吗？这完全不需要任何代码，但是对于那些对此表示反对的人，这里您可以:)

 render() {
    const details = this.props.userData.map((data, index) => {
        return (
            <tbody key={index} onClick={this.getRowDetails.bind(this, data)}>
                <tr>
                    <td>{data.account_id}</td>
                    <td>{data.event_id}</td>
                    <td>{data.event_type}</td>
                    <td>{data.event_time}</td>
                    <td>{data.subscription_id}</td>
                </tr>
            </tbody>
        );
    })

    return (
        <div>
            {this.props.userData.length > 0 &&
                <Row>
                    <Card>
                        <Table hoverable={true} striped={true} id="table">
                            <thead>
                                <tr>
                                    <th data-field="account_id">User ID</th>
                                    <th data-field="event_id">Event ID</th>
                                    <th data-field="event_type">Event Type</th>
                                    <th data-field="event_time">Event Time</th>
                                    <th data-field="sub_id">Subscription ID</th>
                                </tr>
                            </thead>
                            {details}
                        </Table>
                    </Card>
                </Row>
            }

Answer 1

通过在Materialize表中使用另一个分页组件来解决该问题。我尝试使用jQuery，但由于建议不要在React中使用它，因此我仅提取了另一个react分页并将其与表结合。

如何使用React和MaterializeCSS进行表分页

1 个答案: