pref: show pager even total is 0

Author: orzyyyy

assets/index.less

@@ -53,6 +53,16 @@
       }
     }
 
+    &-disabled {
+      cursor: not-allowed;
+      &:hover {
+        border-color: #d9d9d9;
+        a {
+          color: #d9d9d9;
+        }
+      }
+    }
+
     &-active {
       background-color: #2db7f5;
       border-color: #2db7f5;

src/Pager.jsx

@@ -13,6 +13,10 @@ const Pager = (props) => {
     cls = `${cls} ${props.className}`;
   }
 
+  if (!props.page) {
+    cls = `${cls} ${prefixCls}-disabled`;
+  }
+
   const handleClick = () => {
     props.onClick(props.page);
   };

src/Pagination.jsx

@@ -425,19 +425,32 @@ export default class Pagination extends React.Component {
     }
 
     if (allPages <= 5 + pageBufferSize * 2) {
+      const pagerProps = {
+        locale,
+        rootPrefixCls: prefixCls,
+        onClick: this.handleChange,
+        onKeyPress: this.runIfEnter,
+        showTitle: props.showTitle,
+        itemRender: props.itemRender,
+      };
+      if (!allPages) {
+        pagerList.push(
+          <Pager
+            {...pagerProps}
+            key="noPager"
+            page={allPages}
+            className={`${prefixCls}-disabled`}
+          />
+        );
+      }
       for (let i = 1; i <= allPages; i++) {
         const active = this.state.current === i;
         pagerList.push(
           <Pager
-            locale={locale}
-            rootPrefixCls={prefixCls}
-            onClick={this.handleChange}
-            onKeyPress={this.runIfEnter}
+            {...pagerProps}
             key={i}
             page={i}
             active={active}
-            showTitle={props.showTitle}
-            itemRender={props.itemRender}
           />
         );
       }
@@ -578,8 +591,8 @@ export default class Pagination extends React.Component {
         </li>
       );
     }
-    const prevDisabled = !this.hasPrev();
-    const nextDisabled = !this.hasNext();
+    const prevDisabled = !this.hasPrev() || !allPages;
+    const nextDisabled = !this.hasNext() || !allPages;
     return (
       <ul
         className={`${prefixCls} ${props.className}`}

tests/Pagination.spec.js

@@ -705,6 +705,15 @@ describe('current value on onShowSizeChange when total is 0', () => {
       }, 10);
     }, 10);
   });
+
+  it('when total is 0, pager should show and disabled', () => {
+    const itemButton = TestUtils.findRenderedDOMComponentWithClass(
+      pagination,
+      'rc-pagination-item'
+    );
+    expect(TestUtils.isDOMComponent(itemButton)).to.be(true);
+    expect(itemButton.className).to.contain('rc-pagination-item-disabled');
+  });
 });
 
 describe('data and aria props', () => {