title: Recalculate pagination when filter request is applied
body: <p>I have this React page generated by JHipster:</p>
  <pre><code>import ......
  
  export interface IOrdersProps extends StateProps, DispatchProps, RouteComponentProps&lt;{ url: string }&gt; {}
  
  export const Orders = (props: any) =&gt; {
    const [paginationState, setPaginationState] = useState(
      overridePaginationStateWithQueryParams(getSortState(props.location, ITEMS_PER_PAGE, 'id'), props.location.search)
    );
  
    const [searchNameParam, setSearchNameParam] = useState('');
    const lastSearchNameParam = useRef(searchNameParam);
  
    const [ordersList, setOrdersList] = useState&lt;any&gt;([]);
    const [itemsSize, setItemsSize] = useState&lt;any&gt;([]);
    const [tradesList, setTradesList] = useState&lt;any&gt;();
    const [twapList, setTwapList] = useState&lt;any&gt;();
  
    const getAllEntities = async () =&gt; {
      const page = paginationState.activePage - 1;
      const itemsPerPage = paginationState.itemsPerPage;
      console.log('Refreshing page: ' + page);
      const apiUrl = 'api/orders?page=' + page + '&amp;size=' + itemsPerPage + '&amp;searchNameParam=' + searchNameParam;
  
      const result = await axios.get&lt;IOrders&gt;(apiUrl);
  
      setOrdersList(result.data);
    };
  
    const sortEntities = () =&gt; {
      getAllEntities();
      const endURL = `?page=${paginationState.activePage}&amp;sort=${paginationState.sort},${paginationState.order}`;
      if (props.location.search !== endURL) {
        props.history.push(`${props.location.pathname}${endURL}`);
      }
    };
  
    useEffect(() =&gt; {
      sortEntities();
    }, [paginationState.activePage, paginationState.order, paginationState.sort]);
  
    useEffect(() =&gt; {
      const request = async () =&gt; {
        const apiUrl = 'api/ordersCount';
        const result = await axios.get&lt;IOrders&gt;(apiUrl);
        setItemsSize(result.data);
      };
      request();
      getAllEntities();
    }, []);
  
    const sort = p =&gt; () =&gt; {
      setPaginationState({
        ...paginationState,
        order: paginationState.order === 'asc' ? 'desc' : 'asc',
        sort: p,
      });
    };
  
    const handlePagination = currentPage =&gt; {
      setTradesList(null);
      setTwapList(null);
      setPaginationState({
        ...paginationState,
        activePage: currentPage,
      });
    };
  
    const handleSyncList = () =&gt; {
      sortEntities();
    };
  
    const { match, loading, totalItems } = props;
  
    useEffect(() =&gt; {
      if (searchNameParam !== lastSearchNameParam.current) {
        handleSyncList();
        lastSearchNameParam.current = searchNameParam;
      }
    }, [searchNameParam])
  
    return (
      &lt;div&gt;    
            &lt;div&gt;    
                &lt;Table&gt;
                  ............
                  &lt;thead&gt;
                    &lt;tr&gt;
                      &lt;th&gt;                         
                        &lt;div&gt;
                          &lt;span&gt;Filter&lt;/span&gt;
                          &lt;input onChange={e =&gt; setSearchNameParam(e.target.value)}/&gt;
                        &lt;/div&gt;
                        ................                   
                    &lt;/tr&gt;
                  &lt;/thead&gt;
                  {ordersList &amp;&amp; ordersList.length &gt; 0 ? (
                  &lt;tbody&gt;
                    {ordersList.map((orders, i) =&gt; (
                      
                    ))}
                  &lt;/tbody&gt;
                  ) : (
                    !loading &amp;&amp; &lt;div className=&quot;alert alert-warning&quot;&gt;No Orders found&lt;/div&gt;
                  )}
                &lt;/Table&gt;
  
            &lt;/div&gt;
  
            {/*{props.totalItems ? (*/}
            &lt;div className={ordersList &amp;&amp; ordersList.length &gt; 0 ? '' : 'd-none'}&gt;
              {/*&lt;Row className=&quot;justify-content-center&quot;&gt;*/}
              {/*  &lt;JhiItemCount page={paginationState.activePage} total={totalItems} itemsPerPage={paginationState.itemsPerPage} /&gt;*/}
              {/*&lt;/Row&gt;*/}
              &lt;Row className=&quot;justify-content-center&quot;&gt;
                &lt;JhiPagination
                  activePage={paginationState.activePage}
                  onSelect={handlePagination}
                  maxButtons={5}
                  itemsPerPage={paginationState.itemsPerPage}
                  totalItems={itemsSize}
                /&gt;
              &lt;/Row&gt;
            &lt;/div&gt;
          &lt;/Tab&gt;
          &lt;Tab eventKey={'Asset Volumes'} title=&quot;Asset Volumes&quot; onSelect={() =&gt; {}}&gt;
            &lt;AssetVolumes /&gt;
          &lt;/Tab&gt;
        &lt;/Tabs&gt;
  
      &lt;/div&gt;
    );
  };
  
  const mapStateToProps = ({ orders }: IRootState) =&gt; ({
    ordersList: orders.entities,
    loading: orders.loading,
    totalItems: orders.totalItems,
  });
  
  const mapDispatchToProps = {
    getEntities,
  };
  
  type StateProps = ReturnType&lt;typeof mapStateToProps&gt;;
  type DispatchProps = typeof mapDispatchToProps;
  
  export default connect(mapStateToProps, mapDispatchToProps)(Orders);
  </code></pre>
  <p>When I enter something into search area API request is made and new data is populated.
  But pagination is not updated.
  How I can force the pagination pages to be recalculated when I receive new pages of data with search criteria?</p>