question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

I thought that List itself will handle the data to show but it seems that pagination props does not work.
https://preview.pro.ant.design/#/list/basic-list

const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      pageSize: 5,
      total: 50,
};
<List
  size="large"
  rowKey="id"
  loading={loading}
  pagination={paginationProps}
  dataSource={list}
  renderItem={item => (
    <List.Item
      actions={[<a>编辑</a>, <MoreBtn />]}
    >
      <List.Item.Meta
        avatar={<Avatar src={item.logo} shape="square" size="large" />}
        title={<a href={item.href}>{item.title}</a>}
        description={item.subDescription}
      />
      <ListContent data={item} />
    </List.Item>
  )}
/>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
pavelbaranchukcommented, Mar 23, 2019

This is a working solution. Except for the name of the function. It should be called onShowSizeChange, not onChange.

2reactions
xcaptaincommented, Apr 8, 2018

遇到同样的问题,现在List的文档确实没有分页的效果,通过 https://ant.design/components/pagination/#components-pagination-demo-changer 可以设置分页属性

const paginationProps = {
    showSizeChanger: true,
    showQuickJumper: true,
    pageSize: 5,
    count: 5,
    total: 50,
    current: this.state.current,
    onChange: (page, pageSize) => {
        this.setState({
            current: page,
        });
        this.props.dispatch({
            type: 'list/fetch',
            payload: {
            count: 5,
            page,
            pageSize,
            },
        });
    },
};
Read more comments on GitHub >

github_iconTop Results From Across the Web

Pagination - List.js
Perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on...
Read more >
How to implement pagination on a list? - java - Stack Overflow
Is there any library that can be used to implement paging for a list? Let' assume I have a space of 10 lines,...
Read more >
Pagination - Bootstrap
Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to...
Read more >
Pagination Best Practices for Google | Documentation
Learn best practices for indexing your ecommerce site when using pagination and incremental page loading and how this can impact Google Search.
Read more >
Paginate Collection lists - Webflow University
To enable pagination on a selected collection list, go to the Element settings panel and check Paginate items. Optionally, you can change the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found