react-kaminari/Pagination.js at master · kshahkshah/react-kaminari · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React, { findDOMNode, Component } from 'react';
import PropTypes from "prop-types";

export default class Pagination extends Component {
  render() {
    const { current_page, total_pages, total_count } = this.props;

    var windowSize = 4;

    if (current_page > 1) {
      var firstPage = (
        <span className="first">
          <a href='#' rel='first' onClick={() => this.props.onPaginationClick(1)}>&laquo; First</a>
        </span>
      )
    } else {
      var firstPage = '';
    }

    if (!(current_page - 1) <= 0) {
      var previousPage = (
        <span className="previous">
          <a href='#' rel='previous' onClick={() => this.props.onPaginationClick(current_page - 1)}>&lsaquo; Prev</a>
        </span>
      )
    } else {
      var previousPage = '';
    }

    var pageWindow = [];
    var i = current_page - windowSize;

    while(i < current_page) {
      if (i >= 1) {
        pageWindow.push(i);
      }
      i++;
    }

    pageWindow.push(current_page);

    var i = current_page+1;
    while((i <= (current_page + windowSize)) && (i <= total_pages)) {
      pageWindow.push(i);
      i++;
    }

    if (current_page > windowSize + 1) {
      var leftEllipsis = <span className="page gap">&hellip;</span>
    } else {
      var leftEllipsis = ''
    }

    var currentWindow = [];

    pageWindow.map(function(page) {
      if (current_page == page) {
        var link = page;
      } else {
        var link = <a href='#' onClick={() => this.props.onPaginationClick(page)}>{page}</a>
      }

      currentWindow.push(
        <span className="page" key={'page-' + page}>
          {link}{' '}
        </span>
      )
    }, this)

    if (current_page + 1 <= total_pages) {
      var nextPage = (
        <span className="next">
          <a href='#' rel='next' onClick={() => this.props.onPaginationClick(current_page + 1)}>Next &rsaquo;</a>
        </span>
      )
    } else {
      var nextPage = '';
    }

    if (current_page != total_pages) {
      var lastPage = (
        <span className="last">
          <a href='#' rel='last' onClick={() => this.props.onPaginationClick(total_pages)}>Last &raquo;</a>
        </span>
      )
    } else {
      var lastPage = '';
    }

    if (current_page + windowSize < total_pages) {
      var rightEllipsis = <span className="page gap">&hellip;</span>
    } else {
      var rightEllipsis = ''
    }

    return (
      <nav className="pagination">
        {firstPage}
        {' '}
        {previousPage}
        {' '}
        {leftEllipsis}
        {' '}
        {currentWindow}
        {' '}
        {rightEllipsis}
        {' '}
        {nextPage}
        {' '}
        {lastPage}
      </nav>


    );
  }
}

Pagination.propTypes = {
  current_page: PropTypes.number.isRequired,
  total_pages:  PropTypes.number.isRequired,
  total_count:  PropTypes.number.isRequired
};