How can I get pagination work?


#1

Hi all,
I’m trying to implement the pagination on newest Meteor 1.5.2
I get the message infinity below:

TypeError: Cannot read property 'ready' of null
    at GridPaging.setDisplayedPages (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:120887)
    at GridPaging.componentWillReceiveProps (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:120871)
    at modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:18243
    at measureLifeCyclePerf (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:17708)
    at ReactCompositeComponentWrapper.updateComponent (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:18242)
    at ReactCompositeComponentWrapper.receiveComponent (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:18179)
    at Object.receiveComponent (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:10730)
    at Object.updateChildren (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:17442)
    at ReactDOMComponent._reconcilerUpdateChildren (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:16976)
    at ReactDOMComponent._updateChildren (modules.js?hash=2655cfff73e00fd13ccdff98af126d1e173cbf87:17080)

Please help to find out the solution, my codes are below:

ReactiveRegisters.js


import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
import { Link } from 'react-router-dom';
import { Row, Col, Button } from 'react-bootstrap';
import { createContainer } from 'meteor/react-meteor-data';
import { Registers } from '../../api/registers';
import BootstrapPaginator from 'react-bootstrap-pagination';
import Loading from '../../components/Loading';

class ReactiveRegisters extends Component {
	constructor(props) {
		super(props);
		

	}
	renderRegister(register) {
		return (
			<li key={register._id}>{register.firstname}</li>
		);
	}
	
	render() {
		return ( !this.props.loading ? (
		<div>
			<ul>
				{this.props.registers.map(this.renderRegister)}
			</ul>
			<BootstrapPaginator
				pagination={this.props.pagination}
				limit={10}
				containerClass="text-center"
			/>
		</div>
		) : <Loading />);
	}
}

ReactiveRegisters.propTypes = {
	registers: PropTypes.array.isRequired,
    loading: PropTypes.bool.isRequired,
    pagination: PropTypes.object,
};

export default createContainer(() => {  
	pagination = new Meteor.Pagination(Registers, {
		filters: {},
		sort: {},
		perPage: 10,
		reactive: true,
		debug: true,
	});
	return {
		loading: !pagination.ready(),
		registers: pagination.getPage(),
  };
}, ReactiveRegisters);

publications.js

import { Meteor } from 'meteor/meteor';
import { check } from 'meteor/check';
import { Events } from '../events';
import { Registers } from '../registers';
import { publishPagination } from 'meteor/kurounin:pagination'

publishPagination(Registers);
import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';

export const Registers = new Mongo.Collection('registers');

Meteor.method({........