AllenFang / react-bootstrap-table

A Bootstrap table built with React.js
https://allenfang.github.io/react-bootstrap-table/
MIT License
2.23k stars 782 forks source link

Programmatically set the current page #1593

Closed sarahmarciano closed 6 years ago

sarahmarciano commented 7 years ago

Is there a way to programmatically set the current page of the pagination Like a button that will reset the page to 1?

prajapati-parth commented 7 years ago

@sarahmarciano Yes. You can use a state value and use it with this option.

Example:

const products = [
  // array items
]

class ReactGrid extends React.Component {
  constructor() {
    super();
    this.state = {
      currentPage: 1
    }
  }

  render() {
    const options = {
      page: this.state.currentPage,
    }

    return (
      <div>
        <button onClick={() => {
            this.setState({
                currentPage: 5
            })
        }}>Update page</button>
        <BootstrapTable data={ products } pagination={ true } options={ options }>
            <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
            <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
            <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}
sarahmarciano commented 7 years ago

@prajapati-parth thank you for your quick response. it's not working for me but as I see in the documentation the page parameter is the page you want to show as default so once the table has been rendered I do not think that changing the page will help (I mean I tried it and it's not working) do you have another idea? thank you!

prajapati-parth commented 7 years ago

Hmm :thinking: That's strange! I've done the exact code and it's working.

AllenFang commented 7 years ago

it's for default page, but usually, it's should work well when you update the page via state(Not sure, I need to check code again). @sarahmarciano could you please show me your example? thanks

nsh87 commented 7 years ago

i guess this was working (since that's how i did things before, also), but as of this morning it doesn't seem to work for me

AllenFang commented 7 years ago

@nsh87 lol, there're some bug on v4.1.2, please update to v4.1.3. And would you please tell me what version you can not work on it?

nsh87 commented 7 years ago

Ya, I updated all libraries, updated react and react-dom, react-bootstrap-tables and things are working again.

On Nov 10, 2017 at 19:57, <Allen notifications@github.com> wrote:

@nsh87 https://github.com/nsh87 lol, there're some bug on v4.1.2, please update to v4.1.3. And would you please tell me what version you can not work on it?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AllenFang/react-bootstrap-table/issues/1593#issuecomment-343638509, or mute the thread https://github.com/notifications/unsubscribe-auth/AEIJJZUMSPdsGCdUKtu8JeOpFapKdey9ks5s1RsqgaJpZM4POHmW .