使用React.js的分页示例

Question

我需要在我的React.js数据网格项目中使用分页。

我使用固定数据表，我需要知道使用ES5进行分页的最好方法是什么(尤其是ES5)。

固定数据表链接如下：

https://facebook.github.io/fixed-data-table/

你能用React.js(用ES5)展示分页的例子吗?或者我该怎么做？

Answer 1

您将需要创建一个react组件来处理分页的状态，然后一次传递一个页面给呈现该表的子组件。

var Paginate = React.createClass({

  getInitialState: function() {
    this.setState({
      currentPage: this.props.currentPage || 0,
      allRows: this.props.rows,
      pageSize: this.props.pageSize || 5
    });
  },

  getThisPage: function() {
    let start = (this.state.currentPage * this.state.pageSize) - this.state.pageSize;
    return this.state.allRows.slice(start, start + this.state.pageSize);
  },

  prevPage: function() {
    let nextPage = this.state.currentPage - 1;

    if (nextPage > 0) return;

    this.setState(Object.assign(this.state, { currentPage: nextPage }));
  },

  nextPage: function() {
    let nextPage = this.state.currentPage + 1;

    if (nextPage > this.sate.allRows / this.state.pageSize) return;

    this.setState(Object.assign(this.state, { currentPage: nextPage }));
  },

  render: function() {
    var _this = this;
    const childrenWithProps = React.Children.map(this.props.children, function(child){
      return React.cloneElement(child, {
        rows: _this.getThisPage()
      });
    });

    return (<div>
      {childrenWithProps}
      <button onClick={this.prevPage}>previous</button>
      <button onClick={this.nextPage}>next</button>
    </div>);

  }
});

var Table = function({ rows }) {
  return (<Table
    rowHeight={50}
    rowsCount={rows.length}
    width={5000}
    height={5000}
    headerHeight={50}>
    <Column
      header={<Cell>Col 1</Cell>}
      cell={<Cell>Column 1 static content</Cell>}
      width={2000}
    />
    <Column
      header={<Cell>Col 2</Cell>}
      cell={<MyCustomCell mySpecialProp="column2" />}
      width={1000}
    />
    <Column
      header={<Cell>Col 3</Cell>}
      cell={({rowIndex, ...props}) => (
        <Cell {...props}>
          Data for column 3: {rows[rowIndex][2]}
        </Cell>
      )}
      width={2000}
    />
  </Table>);
});

ReactDOM.render(<Paginate rows={rows}><Table /></Paginate>,
  document.getElementById('example'));

Answer 2

您可以在构建链中使用babel来编写ES6并将其转换为ES5，但是直接翻译基本示例会得到以下结果：

var React = require('react');
var ReactDOM = require('react-dom');
var Table = require('fixed-data-table').Table;
var Column = require('fixed-data-table').Column;
var Cell = require('fixed-data-table').Cell;

// Table data as a list of array.
var rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

// The remaining is the same as usual.

Answer 3

是的，前段时间我正在寻找类似的东西，并找到了this great文章，其中包含在React中使用FixedDataTable与服务器端呈现的完整示例。