wwwaiser / react-js-pagination Goto Github PK

hidenavigation is hiding first, prev, next and last page .
but i just want to hide prev and next page.

how can i hide the pages number and use only the arrows?

thanks.

When you click on any page or in the next/previous button, it "jumps" as is being redirected to the same page, in other words, the window scroll is set to the top of the page.

This is happening on Firefox and IE only.

Pagination design not working properly with latest bootstrap version, because it removed old classes

Hi, there! I found a problem in some situations. Each page button has a 'href' attr with value '#', when I click on it, instead of next page in current route, the location change to home page. But in some other websites, it works well.
I don't know how it happened for now, but I think you may change the href as 'javascript:void(0);', this can work in any situation.

how to show total number of pages also in the end

I believe this issue lies within the functions that check for page visibility:

  isFirstPageVisible(has_previous_page) {
    const { hideDisabled, hideNavigation, hideFirstLastPages } = this.props;
    return !hideNavigation && !hideFirstLastPages && !(hideDisabled && !has_previous_page);
  }

The && should be ||

Hi,

Thanks for this nice package.

It would be very nice if you could add a hideFirstPageLink and hideLastPageLink options to this package - in order to make it possible to chose if you want to display or not these links.

So, I have a component getting photos from an API.. I have react-js-pagination working and also added TransitionGroup and CSSTransition to animate the rendering.
But when changing page, there's a gap between the pagination and the photo container, and since the window focus is on the pagination, the animation is not seen and then the gap is closed suddenly.

Is it possible to get the focus back to the top of the page?

Thanks

Hi! Thank you for the plugin. I managed to add the component to the app, though I cannot figure out how to pass the data to show. How does the Pagination component know what items to display? Should I decorate the list of items with it?

I'm getting the below error only in Safari. When I remove my import of react-js-pagination.js it goes away. It stops my entire site from loading locally in Safari. Anyone else having this issue or know how I can fix this ?

Safari : Version 8.0.8
Mac OSX Yosemite V10.10.5
"webpack": "^2.2.1"

[Error] TypeError: Map constructor does not accept arguments
	Map (undefined, line 1013)
	(anonymous function)
	(anonymous function)
	eval code
	eval ([native code], line 0)
	(anonymous function) (bundle.js, line 6281)
	__webpack_require__ (bundle.js, line 660)........

Similar to adding the linkClassFirst, there should be an itemClassFirst

Hello,
thank you for your pagination package is very helpful.
i have a question about when i need to change firstPageText it doesn't work the icon is showing but the action click doesn't work this my code :

<Pagination activePage={this.state.activePage}
itemsCountPerPage={10}
firstPageText={
React.createElement('li', {className: ''}, React.createElement("a", {href: '#'}, React.createElement("i", {className: 'material-icons'}, "fast_rewind")))
}
totalItemsCount={100} pageRangeDisplayed={5}
onChange={this.handlePageChange.bind(this)}
/>

thank's in advance.

Loving this so far, the only thing I wish I could do, and maybe I'm over looking something here, is to hide the First Page and Last Page elements and only show the Next Page / Prev Page elements. Is there a way to do so? If not it may be worth exploring. Thanks!

Looks like custom class name property doesn't work. It always resets to default, probably because of https://github.com/vayser/react-js-pagination/blob/master/dist/Pagination.js#L115 (even though there's a change here: https://github.com/vayser/react-js-pagination/blob/master/src/components/Pagination.js#L117)

Does latest version need to be re-published?

Hi,

I like this simple component, but I'd like to improve the UX by disabling first/prev pagination element instead of hiding it. By doing this, the pagination will not 'jump' and it has more or less a fix width.

This could be of course a configurable thing.

Let me know what you think. I could prepare a MR the next days.

Best,
Raoul

I am getting this error when installing react js pagination

npm WARN [email protected] requires a peer of classnames@^2.1.3 but none was installed.
npm WARN [email protected] requires a peer of [email protected] but none was installed.

to resolve it, I had to manually install classnames then paginator where npm should have installed them for me.

For instance,

<Pagination
prevPageText='Prev'
nextPageText='Next'
activePage={props.activePage}
itemsCountPerPage={10}
totalItemsCount={5}
pageRangeDisplayed={props.rangeDisplayed}
onChange={(value) => props.onPage(value)}
/>

In this case, the component has been rendered like the screenshot.

I think the component should display 1 page number.
Thanks,
Hiroki.

<Pagination
      activePage={actualPage}
      itemsCountPerPage={itemsCountPerPage}
      totalItemsCount={totalItemsCount}
      pageRangeDisplayed={5}
      itemClass='page-item'
      activeLinkClass='page-link active'
      linkClass='page-link'
      onChange={(nextPage) => paginateHandler(searchParams, nextPage)}
      getPageUrl={(i) => `/the-url/${i}`}
    />

this is not returning the url.. a bug? I still get '#'

Hello I tried to implement this in React Hooks and it hasn't worked. Is this compatible with React Hooks.

Issue opened wrong.

My react dependency list in yarn shows react-js-pagination requiring [email protected] when upgrading to react 16

Im getting errors about multiple copies of react installed.
Run:

yarn list react

produces:

yarn list v1.1.0
├─ [email protected]
│  └─ [email protected]
└─ [email protected]

Add new 4 props, because it's hard to style first, prev, next and last buttons.

• linkClassFirst
• linkClassPrev
• linkClassNext
• linkClassLast

Demo example

<ul className={innerClass}>
	<li className={itemClass}><a className=`${linkClass} ${linkClassFirst}`><Icon icon="first" /></a></li>
	<li className={itemClass}><a className=`${linkClass} ${linkClassPrev}`><Icon icon="prev" /></a></li>
	<li className={itemClass}><a className=`${linkClass} ${activeLinkClass}`>1</a></li>
	<li className={itemClass}><a className={linkClass}>2</a></li>
	<li className={itemClass}><a className={linkClass}>3</a></li>
	<li className={itemClass}><a className={linkClass}>4</a></li>
	<li className={itemClass}><a className={linkClass}>5</a></li>
	<li className={itemClass}><a className=`${linkClass} ${linkClassNext}`><Icon icon="next" /></a></li>
	<li className={itemClass}><a className=`${linkClass} ${linkClassLast}`><Icon icon="last" /></a></li>
</ul>

I will try to help with it if I have time over this weekend.

ERROR in ./~/react-js-pagination/dist/Pagination.js
Module not found: Error: Cannot resolve module 'className'

Hi,

I am actually using your library and in my global CSS I have .prev and .next classes for styling navigation items.

But there is no option to specify the previous page and next page classes.

FirstPage link is always disabled if I set pageRangeDisplayed={1}. Is there any workaround for this?

I'm using bulma to style my project, the project I have is that bulma pagination marks a page as current by adding the is-current tag on the link, which this library can't do.

Would it be possible to add the prop activeLinkClass? Also a boolean prop for disabling the last / prev / first / last buttons would be pretty handy to have ;)

Edit: See bulma docs on pagination here

My classes are managed via links, not list item elements, so I would appreciate if additional param disabledlinkClass was available.

E.g. I don't need li class = disabled, but I need a class=disabled.

"paginator" forcefully sets .current_page property to 1 if the value is less then 1, but leaves the .total_pages at 0.
https://github.com/deoxxa/paginator/blob/master/index.js#L31

soo, this is never true when there is less then 1 page of results: https://github.com/vayser/react-js-pagination/blob/master/src/components/Pagination.js#L185

Hi. I am using your library directly from the source but I got the error on compiling step.

After inspecting your code I found this symbol :: (https://github.com/vayser/react-js-pagination/blob/master/src/components/Page.js#L64).

What is it? it some magic for me. How can I fix it? Any idea?

I am getting this error when i am trying to import:

Module not found: You attempted to import ../components/Pagination which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

Hello, I wanted to try your paginator but I got this error, I'm running on React 0.14.3 if this can help and that's how I'm using it:

<Pagination
  activePage={1}
  totalItemsCount={50}
  itemsCountPerPage={10}
  onChange={this.onPageClick.bind(this)}
/>

I need to increase or decrease the page no according to prev or next. so it is needed to idetify which button is pressing. please help me.

Assume the pageRange property is set to 5 and there are 20 pages. Initially it shows 1,2,3,4,5. There must be a button on clicking of which I should be able to see the next set i.e 6,7,8,9,10 and so on.

I've noticed that the project has a dependency of "react": "^16.0.0".

Is this necessary ? It breaks some apps (like in our case) which are still using old versions of React.

In version 2.0.1 the pagination is hiding if items<itemsCountPerPage, but in 2.0.2 it is showing unclikable pagination? Is this bug?

So, checking our project dependencies, we saw another project, very close looking to this one.. What's the difference between this project and that one? Are they related?

Seems like react-paginate has been receiving some updates, and it begged the question.

Anyway, thanks!

In Page.js after event (click) in devtools I see error:
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var a
and handler was implented as onChange={handlePageChange} not as in desription onChange={:: this.handlePageChange}

Maybe I'm doing something wrong.

First off, I love this component! By my estimation this tool currently only supports Bootstrap 3.x. If you would like it to work for Bootstrap 4, you will need to add 2 additional props when using this component:

itemClass="page-item"
linkClass="page-link"

tabindex not set on link tags by default, unable to focus when using keyboard only

I installed package and tried to use it :
import Pagination from 'react-js-pagination'; ... <Pagination />
But got an error

Looking to display only the current page number with next and previous buttons as the only way to navigate pages. Setting pageRangeDisplayed to 1 does not render any page numbers.

I've noticed that current pagination library is meant to be used in a scenario when all data fetched once from the server.
The problem is that I fetch data in chunks(only for the current page) and store in a Redux state to reuse later.
So every time I am going to a new page - data is fetched and component with data and pagination are refreshed; when I am returning to the page I've been to before - data is being pulled from the store without component refresh.
So an active page is highlighted only in the last scenario(without component refresh).

Is there any possibility to support this 'active page' state with a component refresh upon page change?

For example, if I want to add an icon or add commas for thousands (1,002 1,003 etc) for large page numbers.

<Pagination
   prevPageText="Prev"
   nextPageText="Next"
   firstPageText="First"
   lastPageText="Last"

   numberText={i => commas(i)}

   innerClass="pagination"
   itemClass="page-item"
   linkClass="page-link"
   activePage={activePage}
   itemsCountPerPage={pageSize}
   totalItemsCount={totalRecords}
   onChange={pageNumber => {
      handlePageChange(pageNumber, pageSize, tableIdentifier);
   }}
/>

Potential changes:

for (
      let i = paginationInfo.first_page;
      i <= paginationInfo.last_page;
      i++
    ) {
      pages.push(
        <Page
          isActive={i === activePage}
          key={i}
          href={getPageUrl(i)}
          pageNumber={i}

          pageText={numberText ? numberText(i) : i + ""}

          onClick={onChange}
          itemClass={itemClass}
          linkClass={linkClass}
          activeClass={activeClass}
          activeLinkClass={activeLinkClass}
        />
      );
    }

Component adds an extra page number when totalItemsCount does not divide exactly itemsCountPerPage.
For example, if totalItemsCount is 383 and itemsCountPerPage is 10, there should be 39 pages displayed, but component renders 37 pages with 10 items, page 38 contains 3 items and page 39 is empty.

Currently the href of every paginator is hard coded to be #, see https://github.com/vayser/react-js-pagination/blob/5a1b7ad6dd9766501b5cfb17873eb3fb10dc5d5c/src/components/Page.js#L65

Would be great to have a hook which configures the way how the href is rendered, useful e.g. for SEO crawlers.

Thanks!

There are lots of mistakes in the work!!!really can't stand!!!

An optional 'aria-label' attribute for the page number links would allow developers to prefix the page number with visually hidden text to be read aloud by assistive technology such as screen readers.