React-bootstrap-table2: Search and Pagination problem

[maspasov]

Hi,

I have an issue related to search and pagination(remote).

If I have more then 10 rows and sizePerPage is 10. When table is already loaded and I click on the next button and then search I expect to back to fist page of pagination, but this is not the current bihavior.

Also in dev tools, I have warning error during searching

Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

All data came from third part API.

Thanks :)

[feather-jmalone]

i'm experiencing similar issues. i have a theory, but haven't had a chance to dig in and investigate that much...

i think the table is performing the search locally _and_ remotely. i say that because my API searches additional fields that are not part of the table, and it returns results that BootstrapTable couldn't possibly... for a split second i see the correct, remote results from my API, and then they disappear because local search was unable to find the same results. presumably both search methods are setting state at the same time, which would explain that warning.

FWIW, i ultimately solved the problem by not using SearchBar at all; i have my own input which triggers the API call onChange (with https://github.com/slorber/awesome-debounce-promise to facilitate the 'debounce' functionality). as far as BootstrapTable is concerned, search is not enabled.

documentation around remote/search is not great. the remote property does not seem to allow for a search boolean: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#remote-bool-object. yet the storybook includes it: https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Remote&selectedStory=Remote%20Search&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

[feather-jmalone]

oh and i agree about the expected behavior of pagination resetting when a new search is performed, but that's easy enough to achieve manually with a simple setState just before the API call. maybe in a future version, that could be an option? (e.g. searchResetsPagination, defaults to true)

[AllenFang]

@feather-jmalone sorry busy on my work, wil get back to you guys ASAP. thanks

[AllenFang]

If I have more then 10 rows and sizePerPage is 10. When table is already loaded and I click on the next button and then search I expect to back to fist page of pagination, but this is not the current bihavior.

Hi everyone, there're two case here:

1. pagination + search without remote
   In this case, no matter what page you are in, after search/filter trigger, react-bootstrap-table2 will switch to first page automatically

2. pagination + search with remote
   In this case, when search/filter trigger, react-bootstrap-table2 do nothing .
   Why do nothing, that is because you enable the remote mode, which mean you have to tell react-bootstrap-table2 which page you want to go and what data you want to display.

Remember, the remote mode is meaning you have control everything, page, sort, data, filter, search etc.

Please let me know your idea or your thought about this case. thanks

[maspasov]

Thanks @feather-jmalone I agree with your idea, we can create custom input to build search functionality, but I think this is workaround and it’s not the best solution.

@Allen I understood your points, I’d like to ask, how we can set pagination to one before API call for searching, I try to set pagination option - page: 1, it doesn’t work, thanks

[AllenFang]

@maspasov I think it work for me, but there is a UI part can be enhanced is that when you assign page to one but the page one button seems not being update so that it will look like not selected but the data is display correctly. Following is my dummy code:

import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import paginationFactory from 'react-bootstrap-table2-paginator';

const { SearchBar } = Search;

const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
  <div>
    <ToolkitProvider
      keyField="id"
      remote
      data={ data }
      columns={ columns }
      search
    >
      {
        toolkitprops => [
          <SearchBar { ...toolkitprops.searchProps } />,
          <BootstrapTable
            { ...toolkitprops.baseProps }
            remote
            pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
            onTableChange={ onTableChange }
          />
        ]
      }
    </ToolkitProvider>
  </div>
);

RemoteAll.propTypes = {
  data: PropTypes.array.isRequired,
  page: PropTypes.number.isRequired,
  totalSize: PropTypes.number.isRequired,
  sizePerPage: PropTypes.number.isRequired,
  onTableChange: PropTypes.func.isRequired
};

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      data: products.slice(0, 10),
      totalSize: products.length,
      sizePerPage: 10
    };
    this.handleTableChange = this.handleTableChange.bind(this);
  }

  handleTableChange = (type, { page, sizePerPage, searchText }) => {
    setTimeout(() => {
      let newPage = page;
      let result = products;
      if (searchText) {
        //  If user search something
        //  You can ignore this part, it's just some search logic
        result = products.filter((row) => {
          for (let cidx = 0; cidx < columns.length; cidx += 1) {
            const column = columns[cidx];
            let targetValue = row[column.dataField];
            if (targetValue !== null && typeof targetValue !== 'undefined') {
              targetValue = targetValue.toString().toLowerCase();
              if (targetValue.indexOf(searchText) > -1) {
                return true;
              }
            }
          }
          return false;
        });
        // back to first page
        newPage = 1;
      }
      // calculation pagination
      const currentIndex = (newPage - 1) * sizePerPage;
      const data = result.slice(currentIndex, currentIndex + sizePerPage);
      const totalSize = result.length;
      this.setState(() => ({
        page: newPage,
        data,
        totalSize,
        sizePerPage
      }));
    }, 2000);
  }

  render() {
    const { data, sizePerPage, page } = this.state;
    return (
      <RemoteAll
        data={ data }
        page={ page }
        sizePerPage={ sizePerPage }
        totalSize={ this.state.totalSize }
        onTableChange={ this.handleTableChange }
      />
    );
  }
}

[AllenFang]

RELEASE NOTE

Please upgrade to [email protected], [email protected] and [email protected]

[akash-more]

Hi @AllenFang I am facing the same issue in UI, the data is updated but the page number is not updated to 1 in the UI. Is this issue resolved?

[ronaiza-cardoso]

Hi, I'm having this issue, the UI pagination is been updating but the data is not, this is the my table with the data:

import React, { Component } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';

const columns = [
  {
    dataField: 'id',
    text: 'Product ID'
  },
  {
    dataField: 'name',
    text: 'Product Name'
  }
];

const products = [
    {
      "id": "5c6ed942a297a3fd2c391bd2",
      "name": "Shauna Cunningham"
    },
    {
      "id": "5c6ed9422edfa1cff2761660",
      "name": "Bennett Nielsen"
    },
    {
      "id": "5c6ed9427e8b3764ea416fba",
      "name": "Milagros Castro"
    },
    {
      "id": "5c6ed9426494a3a6aeaf9701",
      "name": "Essie Ratliff"
    },
    {
      "id": "5c6ed94250fadbdb73470196",
      "name": "Parker Yang"
    },
    {
      "id": "5c6ed9427b1d8222ca970a0f",
      "name": "Castro Bartlett"
    },
    {
      "id": "5c6ed94271b56acd240e47ac",
      "name": "Patrick Bender"
    },
    {
      "id": "5c6ed9426bfb5b8a894d3b83",
      "name": "Mallory Valenzuela"
    },
    {
      "id": "5c6ed942c95b2efc59fbc59f",
      "name": "Elma Dillard"
    },
    {
      "id": "5c6ed94230d5c90a438e0df8",
      "name": "Olsen Kidd"
    },
    {
      "id": "5c6ed94257edb011816fcdac",
      "name": "Pamela Vargas"
    },
    {
      "id": "5c6ed9425dcf25100ffefe5c",
      "name": "Deloris Bradford"
    },
    {
      "id": "5c6ed94285397a10901e83f1",
      "name": "Noreen Burnett"
    },
    {
      "id": "5c6ed9422248399cf2952de4",
      "name": "Allen Mcintyre"
    },
    {
      "id": "5c6ed9421995c1bdcd629d06",
      "name": "Elsa Bray"
    },
    {
      "id": "5c6ed942f10dbfba3e5b41c6",
      "name": "Walker James"
    },
    {
      "id": "5c6ed94220075eec954a0dae",
      "name": "Nita Banks"
    },
    {
      "id": "5c6ed942fbd3f411edb53230",
      "name": "Doyle Gould"
    },
    {
      "id": "5c6ed942cd7feb0ad7e78b42",
      "name": "Mcguire Pope"
    },
    {
      "id": "5c6ed9429d0b6f31a031e939",
      "name": "Tricia Hopkins"
    },
    {
      "id": "5c6ed94208c5f0b429aee20b",
      "name": "Mcintyre England"
    },
    {
      "id": "5c6ed942e4df118a8a4e3c70",
      "name": "Farley Barber"
    },
    {
      "id": "5c6ed9420dc6bb0014a0d36c",
      "name": "Adriana Tran"
    },
    {
      "id": "5c6ed942ab8497f3880c1bba",
      "name": "Angelia Riddle"
    },
    {
      "id": "5c6ed942ec1027456d1b3155",
      "name": "Hardin Franks"
    },
    {
      "id": "5c6ed9429b0031cd25ef2cde",
      "name": "Sherri Moody"
    },
    {
      "id": "5c6ed942d3dc925f14ca95dd",
      "name": "Hobbs Aguirre"
    },
    {
      "id": "5c6ed94231c5bb03e3d32dad",
      "name": "Ryan Brennan"
    },
    {
      "id": "5c6ed942d36ffc3f1d1a4352",
      "name": "Rosales Alexander"
    },
    {
      "id": "5c6ed94235921d05ad276011",
      "name": "Eleanor Maddox"
    },
    {
      "id": "5c6ed9427e16e666990d5daa",
      "name": "Haynes Willis"
    },
    {
      "id": "5c6ed9421ab59c155264fec8",
      "name": "Santos Chavez"
    },
    {
      "id": "5c6ed942e6545f6cfc61b0cb",
      "name": "Lott Harding"
    },
    {
      "id": "5c6ed94265694d4ecafd37a0",
      "name": "Henrietta Fleming"
    },
    {
      "id": "5c6ed9426dea9f61772d1d10",
      "name": "Alyson Mooney"
    },
    {
      "id": "5c6ed94293d466654e9b006f",
      "name": "Joyce Walsh"
    },
    {
      "id": "5c6ed9425ec0a5e9b407dc1e",
      "name": "Gena Hampton"
    },
    {
      "id": "5c6ed942ead4a243d2a7775d",
      "name": "Bertie Wong"
    },
    {
      "id": "5c6ed942d9fea35665c9f700",
      "name": "Courtney Blackburn"
    },
    {
      "id": "5c6ed942ebec8fd7c33afbdc",
      "name": "Harmon Melton"
    },
    {
      "id": "5c6ed9428fbb5723c85de41a",
      "name": "Glenna Sullivan"
    },
    {
      "id": "5c6ed942926aebdb479d29af",
      "name": "Adele Owens"
    },
    {
      "id": "5c6ed94235b44eca57ae126c",
      "name": "Deborah Glenn"
    },
    {
      "id": "5c6ed942bd6772286bc0b2a2",
      "name": "Osborne Harrison"
    },
    {
      "id": "5c6ed9429d7cd05c6484526e",
      "name": "Barlow Chang"
    },
    {
      "id": "5c6ed942105b2bb0bd0d1082",
      "name": "Horn Hancock"
    },
    {
      "id": "5c6ed9427cbb2864eb2e896c",
      "name": "Eve Jones"
    },
    {
      "id": "5c6ed942e92b65abca8433f4",
      "name": "Katie Richard"
    },
    {
      "id": "5c6ed942c45089f95f8a0bbf",
      "name": "Mcfadden Bentley"
    },
    {
      "id": "5c6ed94232c578c31832d181",
      "name": "Summers Calderon"
    },
    {
      "id": "5c6ed942bce870f638f6da69",
      "name": "Martinez Booker"
    },
    {
      "id": "5c6ed9425e1f43744c67f2c1",
      "name": "Beasley Howard"
    },
    {
      "id": "5c6ed94271ab8b6850f2e9e6",
      "name": "Olivia Lynch"
    },
    {
      "id": "5c6ed9424e39076ed20fb1f4",
      "name": "Brock Oneal"
    },
    {
      "id": "5c6ed942285ba70c6e70f20b",
      "name": "Eugenia Gutierrez"
    },
    {
      "id": "5c6ed942538fffd529d2f732",
      "name": "Shelia Reese"
    },
    {
      "id": "5c6ed942029a49a93d865775",
      "name": "Elena Morris"
    },
    {
      "id": "5c6ed942f568f60fbfe7c3b1",
      "name": "Mccormick Hendrix"
    },
    {
      "id": "5c6ed942802015744ec22463",
      "name": "Lynne Paul"
    },
    {
      "id": "5c6ed94247c000882da54887",
      "name": "Lakisha Mcknight"
    },
    {
      "id": "5c6ed942329bcb4d227a0729",
      "name": "Hodges Todd"
    },
    {
      "id": "5c6ed942180919ad0f4d118c",
      "name": "Colon Patel"
    },
    {
      "id": "5c6ed942df9732f9530e0ad6",
      "name": "Cohen Mcmahon"
    },
    {
      "id": "5c6ed94216d680d2a4274fcb",
      "name": "Odom Waters"
    },
    {
      "id": "5c6ed94289578f46445cb713",
      "name": "Alberta Blankenship"
    },
    {
      "id": "5c6ed9427ff46e8a08f4c1e1",
      "name": "Marlene Franco"
    }
  ]
export class Grid extends Component {
  render() {
    return (
        <BootstrapTable
          keyField="id"
          data={products}
          columns={columns}
          pagination={paginationFactory()}
        />
    );
  }
}

the lib version is:

    "react-bootstrap-table-next": "^1.2.1",
    "react-bootstrap-table2-paginator": "^1.0.3",
    "react-bootstrap-table2-toolkit": "^1.1.1"

[sammartfrank]

@AllenFang how are you Allen? I am currently experiencing an issue where every time im in the firstPage the previous button is enabled and if clicked, crashes de the app. I am currently working on a NO remote table.

Hope you are all well and sound, thanks in advance!