JAVASCRIPT 191
Untitled Guest on 27th February 2020 12:18:25 PM
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Order from './Components/OrdersItems';
  4. import Pagination from "react-js-pagination";
  5.  
  6. class App extends React.Component {
  7.     constructor() {
  8.         super();
  9.  
  10.         this.state = {
  11.             orders: [],
  12.             activePage: 1,
  13.             totalItems: 50
  14.         };
  15.     }
  16.     componentDidMount() {
  17.         this.getItems(1);
  18.     }
  19.  
  20.     getItems(page){
  21.         fetch('/app/getOrders?page='+page)
  22.             .then(response => response.json())
  23.             .then(orders => {
  24.                 this.setState({
  25.                     orders: orders.items,
  26.                     totalItems:orders.pagination.total,
  27.                 });
  28.             });
  29.     }
  30.  
  31.     handlePageChange(pageNumber) {
  32.  
  33.         this.setState({activePage: pageNumber});
  34.         console.log(`active page is ${pageNumber}`);
  35.         this.getItems(pageNumber);
  36.     }
  37.  
  38.  
  39.     render() {
  40.         return (
  41.             <div className="mt-5">
  42.             <table className="table mt-1">
  43.                 <thead className="thead-dark">
  44.                 <tr>
  45.                     <th scope="col">Vardas</th>
  46.                     <th scope="col">Tel.Nr.</th>
  47.                     <th scope="col">─«rangos pavadinimas</th>
  48.                     <th scope="col">Data</th>
  49.                 </tr>
  50.                 </thead>
  51.                 <tbody>
  52.                 {this.state.orders.map(
  53.                     ({ id, name, phone, device, timestamp }) => (
  54.                         <Order
  55.                             key={id}
  56.                             name={name}
  57.                             phone={phone}
  58.                             device={device}
  59.                             timestamp={timestamp}
  60.                         >
  61.                         </Order>
  62.                     )
  63.                 )}
  64.                 </tbody>
  65.             </table>
  66.                 <Pagination
  67.                     activePage={this.state.activePage}
  68.                     itemsCountPerPage={10}
  69.                     totalItemsCount={this.state.totalItems}
  70.                     pageRangeDisplayed={5}
  71.                     onChange={this.handlePageChange.bind(this)}
  72.                     itemClass="page-item"
  73.                     linkClass="page-link"
  74.                 />
  75.             </div>
  76.       );
  77.     }
  78. }
  79.  
  80. ReactDOM.render(<App />, document.getElementById('orders'));
Raw Paste

Login or Register to edit or fork this paste. It's free.