Add pagerCount props

README.md

@@ -76,7 +76,8 @@ 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          |          |
-
+| hideBoundary    | hide boundary jumper               | Bool          | false                     |
+| pagerCount      | show number of pagers              | Number        | 5                         |
 
 ## License
 

examples/pagerCount.html

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

examples/pagerCount.js

@@ -0,0 +1,22 @@
+import 'rc-pagination/assets/index.less';
+import Pagination from 'rc-pagination';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const total = 500;
+
+const itemRender = (current, type, element) => {
+  const hideItems = ['jump-last', 'jump-first'];
+
+  if (hideItems.includes(type)) {
+    return null;
+  }
+
+  return element;
+};
+
+ReactDOM.render(
+  <div>
+    <Pagination total={total} itemRender={itemRender} pagerCount={10} showPrevNextJumpers={false} />
+  </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) {
@@ -143,13 +145,13 @@ class Pagination extends React.Component {
   }
 
   getJumpPrevPage = () => {
-    return Math.max(1, this.state.current - (this.props.showLessItems ? 3 : 5));
+    return Math.max(1, this.state.current - (this.props.showLessItems ? 3 : this.props.pagerCount));
   }
 
   getJumpNextPage = () => {
     return Math.min(
       calculatePage(undefined, this.state, this.props),
-      this.state.current + (this.props.showLessItems ? 3 : 5)
+      this.state.current + (this.props.showLessItems ? 3 : this.props.pagerCount)
     );
   }
 
@@ -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 / 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 <= pagerCount + pageBufferSize * 2) {
       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}
@@ -529,10 +547,10 @@ class Pagination extends React.Component {
       );
 
       let left = Math.max(1, current - pageBufferSize);
-      let right = Math.min(current + pageBufferSize, allPages);
+      let right = Math.min(current + pageBufferSize - boundaryRemainder, allPages);
 
       if (current - 1 <= pageBufferSize) {
-        right = 1 + pageBufferSize * 2;
+        right = 1 + pageBufferSize * 2 - boundaryRemainder;
       }
 
       if (allPages - current <= pageBufferSize) {
@@ -556,13 +574,16 @@ class Pagination extends React.Component {
         );
       }
 
-      if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
+      if (
+        current - boundaryRemainder > pageBufferSize &&
+        current !== boundaryRemainder + pageBufferSize + 1
+      ) {
         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`,
         });