Add pagerCount props

README.md

@@ -76,7 +76,7 @@ React.render(<Pagination />, container);
 | nextIcon        | specifict the default previous icon     | ReactNode \| (props: PaginationProps) => ReactNode          |          |
 | jumpPrevIcon    | specifict the default previous icon     | ReactNode \| (props: PaginationProps) => ReactNode          |          |
 | jumpNextIcon    | specifict the default previous icon     | ReactNode \| (props: PaginationProps) => ReactNode          |          |
-
+| pagerCount      | show number of pagers              | Number        | 5                         |
 
 ## License
 

examples/pagerCount.html

@@ -0,0 +1 @@
+placeholder

examples/pagerCount.js

@@ -0,0 +1,37 @@
+import 'rc-pagination/assets/index.less';
+import Pagination from 'rc-pagination';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Select from 'rc-select';
+import 'rc-select/assets/index.css';
+
+const itemRender = (current, type, element) => {
+  const hideItems = ['jump-last', 'jump-first'];
+
+  if (hideItems.includes(type)) {
+    return null;
+  }
+
+  return element;
+};
+
+function onShowSizeChange(current, pageSize) {
+  console.log(current, pageSize);
+}
+
+ReactDOM.render(
+  <div>
+    <Pagination total={500} itemRender={itemRender} pagerCount={10} showPrevNextJumpers={false} />
+
+    <Pagination
+      selectComponentClass={Select}
+      showSizeChanger
+      onShowSizeChange={onShowSizeChange}
+      defaultCurrent={3}
+      total={500}
+      pagerCount={7}
+    />
+
+    <Pagination total={500} pagerCount={8} />
+  </div>
+, document.getElementById('__react-content'));

src/Pager.jsx

@@ -25,15 +25,18 @@ const Pager = (props) => {
     props.onKeyPress(e, props.onClick, props.page);
   };
 
+  const itemRender = props.itemRender(props.page, 'page', <a>{props.page}</a>);
+
   return (
+    itemRender === null ? null :
     <li
       title={props.showTitle ? props.page : null}
       className={cls}
       onClick={handleClick}
       onKeyPress={handleKeyPress}
       tabIndex="0"
     >
-      {props.itemRender(props.page, 'page', <a>{props.page}</a>)}
+      {itemRender}
     </li>
   );
 };

src/Pagination.jsx

@@ -53,6 +53,7 @@ class Pagination extends React.Component {
     nextIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
     jumpPrevIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
     jumpNextIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+    pagerCount: PropTypes.number,
   };
 
   static defaultProps = {
@@ -74,6 +75,7 @@ class Pagination extends React.Component {
     locale: LOCALE,
     style: {},
     itemRender: defaultItemRender,
+    pagerCount: 5,
   };
 
   constructor(props) {
@@ -334,8 +336,11 @@ class Pagination extends React.Component {
     let lastPager = null;
     let gotoButton = null;
 
+    const { pagerCount } = props;
+    const boundaryRemainder = pagerCount % 2 === 0 ? 1 : 0;
     const goButton = (props.showQuickJumper && props.showQuickJumper.goButton);
-    const pageBufferSize = props.showLessItems ? 1 : 2;
+    const halfPagerCount = Math.max(1, Math.floor((pagerCount - 1) / 2));
+    const pageBufferSize = props.showLessItems ? 1 : halfPagerCount;
     const { current, pageSize } = this.state;
 
     const prevPage = current - 1 > 0 ? current - 1 : 0;
@@ -425,7 +430,7 @@ class Pagination extends React.Component {
       );
     }
 
-    if (allPages <= 5 + pageBufferSize * 2) {
+    if (allPages <= pageBufferSize * 2 + boundaryRemainder + 1) {
       const pagerProps = {
         locale,
         rootPrefixCls: prefixCls,
@@ -500,7 +505,19 @@ class Pagination extends React.Component {
           </li>
         );
       }
+      const firstPagerRender = props.itemRender(
+        1,
+        'jump-first',
+        this.getItemIcon(props.jumpNextIcon)
+      );
+      const lastPagerRender = props.itemRender(
+        allPages,
+        'jump-last',
+        this.getItemIcon(props.jumpNextIcon)
+      );
+
       lastPager = (
+        firstPagerRender === null ? null :
         <Pager
           locale={props.locale}
           last
@@ -515,6 +532,7 @@ class Pagination extends React.Component {
         />
       );
       firstPager = (
+        lastPagerRender === null ? null :
         <Pager
           locale={props.locale}
           rootPrefixCls={prefixCls}
@@ -528,15 +546,15 @@ class Pagination extends React.Component {
         />
       );
 
-      let left = Math.max(1, current - pageBufferSize);
+      let left = Math.max(1, current - pageBufferSize - boundaryRemainder);
       let right = Math.min(current + pageBufferSize, allPages);
 
       if (current - 1 <= pageBufferSize) {
-        right = 1 + pageBufferSize * 2;
+        right = 1 + pageBufferSize * 2 + boundaryRemainder;
       }
 
-      if (allPages - current <= pageBufferSize) {
-        left = allPages - pageBufferSize * 2;
+      if (allPages - current < pageBufferSize) {
+        left = allPages - pageBufferSize * 2 - boundaryRemainder;
       }
 
       for (let i = left; i <= right; i++) {
@@ -556,13 +574,13 @@ class Pagination extends React.Component {
         );
       }
 
-      if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
+      if (current - boundaryRemainder - 2 > pageBufferSize) {
         pagerList[0] = React.cloneElement(pagerList[0], {
           className: `${prefixCls}-item-after-jump-prev`,
         });
         pagerList.unshift(jumpPrev);
       }
-      if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) {
+      if (allPages - current > pageBufferSize && current !== allPages - pageBufferSize - 1) {
         pagerList[pagerList.length - 1] = React.cloneElement(pagerList[pagerList.length - 1], {
           className: `${prefixCls}-item-before-jump-next`,
         });