JSFiddle - React, Tailwind, and code Playground

by Irina Fedorova

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="some-container">
				<div class="loaded-page">First page </div>
				<div class="loaded-page">Second page</div>
				<div class="loaded-page">Third page</div>
			</div>
			<div class="gigantic pagination">
			    <a href="#" class="previous" data-action="previous">&lsaquo;</a>
			    <input class="pagenumber" type="text" readonly="readonly" />
			    <a href="#" class="next" data-action="next">&rsaquo;</a>
			</div>

CSS

.pagenumber::-ms-clear {
    width: 0;
	height: 0;
}

.pagination {
  display: inline-block;
  border-radius: 3px; }

.pagination a {
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  outline: none;
  border-right: 1px solid #CDCDCD;
  border-left: 1px solid #CDCDCD;
  color: #555555;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-family: Helvetica, Arial, sans-serif;
  /* ATTN: need a better font stack */
  background-color: #f3f3f3;}
  .pagination a:hover, .pagination a:focus, .pagination a:active {
    background-color: #006699;
	color: white;
	border: 1px solid #cdcdcd;}
  .pagination a.previous:hover, .pagination a.previous:focus, .pagination a.previous:active, .pagination a.next:hover,
  .pagination a.next:focus, .pagination a.next:active, .pagination a.disabled, .pagination a.disabled:hover, 
  .pagination a.disabled:focus, .pagination a.disabled:active {
    background-color: #006699;
    color: #A8A8A8;
    cursor: default;
	color: white;}

.pagination a:first-child {
  border: none;
  border-radius: 2px 0 0 2px; }

.pagination a:last-child {
  border: none;
  border-radius: 0 2px 2px 0; }

.pagination input {
  float: left;
  margin: 0;
  padding: 0;
  width: 115px;
  height: 20px;
  outline: none;
  border: none;
  vertical-align: middle;
  text-align: center; }

/* gigantic class for demo purposes */
.gigantic.pagination {
  margin:0; }

.gigantic.pagination a {
  font-size: 30px;
    background-color: #eee;
    border-radius: 0;
    color: #006699;
    float: left;
    height: 35px;
    width: 35px;
	line-height:30px;
	border: solid 1px #ccc;
  }

.gigantic.pagination input {
  width: 120px;
  font-size: 15px;
  font-family: Helvetica, Arial, sans-serif;
  margin:0;
  padding:7px 0;}

/* log element for demo purposes */
.log {
  display: none;
  background-color: #EDEDED;
  height: 300px;
  width: 524px;
  overflow: auto;
  margin-left: 0;
  list-style: none;
  padding: 10px; }
 ...

JavaScript

(function(e) {
    "use strict";
    e.jqPagination = function(t, n) {
        var r = this;
        r.$el = e(t);
        r.el = t;
        r.$input = r.$el.find("input");
        r.$el.data("jqPagination", r);
        r.init = function() {
            r.options = e.extend({}, e.jqPagination.defaultOptions, n);
            r.options.max_page === null && (r.$input.data("max-page") !== undefined ? r.options.max_page = r.$input.data("max-page") : r.options.max_page = 1);
            r.$input.data("current-page") !== undefined && r.isNumber(r.$input.data("current-page")) && (r.options.current_page = r.$input.data("current-page"));
            r.$input.removeAttr("readonly");
            r.updateInput(!0);
            r.$input.on("focus.jqPagination mouseup.jqPagination", function(t) {
                if (t.type === "focus") {
                    var n = parseInt(r.options.current_page, 10);
                    e(this).val(n).select()
                }
                if (t.type === "mouseup") return !1
            });
            r.$input.on("blur.jqPagination keydown.jqPagination", function(t) {
                var n = e(this),
                    i = parseInt(r.options.current_page, 10);
                if (t.keyCode === 27) {
                    n.val(i);
                    n.blur()
                }
                t.keyCode === 13 && n.blur();
                t.type === "blur" && r.setPage(n.val())
            });
            r.$el.on("click.jqPagination", "a", function(t) {
                var n = e(this);
                if (n.hasClass("disabled")) return !1;
                if (!t.metaKey && !t.ctrlKey) {
                    t.preventDefault();
                    r.setPage(n.data("action"))
                }
            })
        };
        r.setPage = function(e, t) {
            if (e === undefined) return r.options.current_page;
            var n = parseInt(r.options.current_page, 10),
                i = parseInt(r.options.max_page, 10);
           ...