Pagination Not working in SplitPlane(Need Urgent Help)

[JayaKrishna-CoxAutomotive]

Needed Urgent help Hi...I need some help I am trying to keep my table in one half of the splitplane but my pagination is not showing there and its always showing only 10elements more than that its not showing

import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { Link } from 'react-router'; import SplitPane from 'react-split-pane'; import Popup from 'react-popup'; import Dropdown from 'react-dropdown'; var classNames = require('classnames'); import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; // or in ECMAScript 5

var products = [{ id: 1, name: "Product1", price: 120 }, { id: 2, name: "Product2", price: 80 },{ id: 3, name: "Product2", price: 80 },{ id: 4, name: "Product2", price: 80 },{ id: 5, name: "Product2", price: 80 },{ id: 1, name: "Product1", price: 120 }, { id: 2, name: "Product2", price: 80 },{ id: 3, name: "Product2", price: 80 },{ id: 4, name: "Product2", price: 80 },{ id: 12, name: "Product2", price: 80 },{ id: 11, name: "Product2", price: 80 }]; //var SplitPane=require('SplitPane'); var $ = require('jquery'); var lastActiveTool = '' var moviearr = []; var ProcessInstancesF = []; var ProcessInstance_Table = []; var instanceLog = [] var n = ''; var i = 0; var dataList = [] //For the Table

class Car extends Component {

render() {
    const numbers = [1, 2, 3, 4, 6]
    // Map through cars and return linked cars
    const ProcessInstances = numbers.map((number) =>
        <li value={number} className="list-group-item">{number}</li>)

    return (
        <SplitPane split="vertical" minSize={150} defaultSize={445}>
            <div style={Object.assign({})} >
                <h1>Process Name</h1>
                {ProcessInstances}
            </div >
            <div  >
                <h1> Process Instances of {n}</h1>
                <BootstrapTable
                    data={products}
                    pagination>
                    <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
                    <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
                    <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
                </BootstrapTable>
            </div>
        </SplitPane>

    );
}

}

export default Car

INDEX.html

Case2: When i restart my node server.For the first time i am able to see that page options as below

But When i click on Page 2.It goes to Page 2 and everything all page number disappears and struck at page 2 only.

[AllenFang]

Hello

1. what version of react-bootstrap-table you useed?

2. can you try to load react-bootstrap-table.min.js after bootstrap.min.js?

[JayaKrishna-CoxAutomotive]

Hi, Thank you for responding. I am currently using the below version checked in Package.json file "react-bootstrap-table": "^3.4.1"

I tried the second option but didnt work

[AllenFang]

I think it's not related with react-bootstrap-table, if you remove the SplitPlane and will be work?

[JayaKrishna-CoxAutomotive]

What you said might/mighnot be true...But i posted it because everything else is working fine even though I keep in split plane(like import to csv ,new, delete....etc) only pagination is not working .....so I thought you may help....

[AllenFang]

@JayaKrishna-CoxAutomotive, ok please give me a minimal and simple repo for reproducing this issue, please keep it clean and let us focus on this issue, but I'm not sure if I can solve this issue and it need some time.