diff --git a/client/src/HomePage/ServiceTable.js b/client/src/HomePage/ServiceTable.js index f566652d..8bdca58b 100644 --- a/client/src/HomePage/ServiceTable.js +++ b/client/src/HomePage/ServiceTable.js @@ -2,9 +2,26 @@ import React, { Component } from "react"; import { Table } from "semantic-ui-react"; class ServiceTable extends Component { - renderTableData() { + constructor() { + super(); + this.setPageNumber = this.setPageNumber.bind(this); + this.state = { + currentPage: 1 + } + } + + setPageNumber(event) { + this.setState({ + currentPage: Number(event.target.id) + }); + } + + renderTableData(servicesPerPage) { if (this.props.service) { - return this.props.service.map((service, index) => { + const indexOfLastService = currentPage * servicesPerPage; + const indexOfFirstService = indexOfLastService - servicesPerPage; + const paginatedData = this.props.service.slice(indexOfFirstService, indexOfLastService); + return paginatedData.map((service, index) => { const { id, serviceid, name, type, location } = service; //destructuring return ( @@ -36,14 +53,34 @@ class ServiceTable extends Component { } render() { + let servicesPerPage = 10; + const pageNumbers = []; + + for (let i = 1; i <= Math.ceil(this.props.service.length / servicesPerPage); i++) { + pageNumbers.push(i); + } + + const renderPageNumbers = pageNumbers.map(number => { + return ( +
  • + {number} +
  • + ); + }); + return (
    + {this.props.service && ( {this.renderTableHeader()} - {this.renderTableData()} + {this.renderTableData(servicesPerPage)}
    )}