Meteor 1.6.x + Ant Design Table + recompose 实现数据分页效果

~ meteor create --full meteor-pagination
Created a new Meteor app in 'meteor-pagination'.

To run your new app:
  cd meteor-pagination
  meteor

If you are new to Meteor, try some of the learning resources here:
  https://www.meteor.com/tutorials

~ cd meteor-pagination
~ git init

yarn add react react-dom --save

yarn add antd --save
yarn add react-router-dom --save

import React from 'react'
import { Meteor } from 'meteor/meteor'
import { render } from 'react-dom'

import App from '../../ui/pages/App'

import 'antd/dist/antd.css'

Meteor.startup(() => {
  render (
    <App />,
    document.getElementById('render-target')
  )
})

import React from 'react'
import Layout from 'antd/lib/layout'
import Menu from 'antd/lib/menu'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

import Home from '../components/Home'
import Links from '../components/Links'

const { Header, Content, Footer } = Layout

const MainLayout = () => {
  return (
    <Layout className='layout'>
      <Header>
        <div className='logo' />
        <Menu
          theme='dark'
          mode='horizontal'
          defaultSelectedKeys={['home']}
          style={{ lineHeight: '64px' }}
        >
          <Menu.Item key='home'><Link to='/'>Home</Link></Menu.Item>
          <Menu.Item key='links'><Link to='/links'>Links</Link></Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: '50px 50px 0' }}>
        <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
          <Route exact path='/' render={({ match }) => <Home />} />
          <Route path='/links' render={({ match }) => <Links />} />
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©2016 Created by Ant UED
      </Footer>
    </Layout>
  )
}

export default MainLayout

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import MainLayout from '../layouts'

const App = () =>
  <Router>
    <Route path='/' component={MainLayout} />
  </Router>

export default App

meteor add react-meteor-data

import React from 'react'
import Table from 'antd/lib/table'
import { withTracker } from 'meteor/react-meteor-data'

import { dateToString } from '../../lib/helpers'
import { Links } from '../../api/links/links'

const { Column } = Table

const LinksTable = ({ dataSource, isReady }) => {
  return (
    <Table dataSource={dataSource} loading={!isReady}>
      <Column
        title='Title'
        key='title'
        dataIndex='title'
      />
      <Column
        title='URL'
        key='url'
        dataIndex='url'
        render={(t, r) => <a href={t} target='_blank'>{t}</a>}
      />
      <Column
        title='CreatedAt'
        key='createdAt'
        dataIndex='createdAt'
        render={(t, r) => dateToString(t)}
      />
    </Table>
  )
}

export default withTracker(() => {
  // 订阅数据
  const linksHandle = Meteor.subscribe('links.all')
  const links = Links.find({}).fetch()
  const dataSource = []

  // 遍历数据，增加 key 用于表格显示
  if (Array.isArray(links)) {
    links.map(link => {
      dataSource.push({
        key: link._id,
        ...link
      })
    })
  }  

  return {
    isReady: linksHandle.ready(),
    dataSource
  }
})(LinksTable)

yarn add mement --save

// Fill the DB with example data on startup

import { Meteor } from 'meteor/meteor'
import { Links } from '../../api/links/links.js'

Meteor.startup(() => {
  // if the Links collection is empty
  Links.remove({})
  for (let i = 0; i < 500; i++) {
    Links.insert({
      title: `Link title (${i})`,
      url: `https://www${i}.google.hk.com/`,
      createdAt: new Date()
    })
  }
})

Meteor.publish('links.all', function (currentPage = 1, pageSize = 10) {
  return Links.find({}, {
    limit: pageSize,                    // 订阅默认的 10 条数据
    skip: (currentPage - 1) * pageSize  // 跳过当前页-1 * 每页数据的数据量，与传统分页没有什么区别
  })
});

yarn add recompose --save

const enhance = compose(
  withState('currentPage', 'setCurrentPage', 1),
  withState('linksCount', 'setLinksCount', 0)
)

export default enhance(
  withTracker(({ currentPage, setLinksCount }) => {
    // 订阅数据
    const linksHandle = Meteor.subscribe('links.all', currentPage)
    const links = Links.find({}).fetch()
    const dataSource = []
    Meteor.call('links.count', (err, result) => {
      if (!err) {
        // 设置数据总量
        setLinksCount(result)
      } else {
        console.log(err.message)
      }
    })

    // 用于调试，查看订阅了多少数据
    if (Array.isArray(links) && links.length !== 0) {
      console.log(links)
    }

    // 遍历数据，增加 key 用于表格显示
    if (Array.isArray(links)) {
      links.map(link => {
        dataSource.push({
          key: link._id,
          ...link
        })
      })
    }

    return {
      isReady: linksHandle.ready(),
      dataSource
    }
  })(LinksTable)
)

'links.count' () {
  return Links.find().count()
}