JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div id="content2">Dynamic Content goes here</div>
<div id="page-selection">
    <!-- Pages come here -->
</div>
<div id="msrResult"></div>

JavaScript

(function (f) {
    f.fn.bootpag = function (n) {
        function j(e, b) {
            var c, d = 0 == a.maxVisible ? 1 : a.maxVisible,
                m = 1 == a.maxVisible ? 0 : 1,
                l = Math.floor((b - 1) / d) * d,
                g = e.find("li");
            a.page = b = 0 > b ? 0 : b > a.total ? a.total : b;
            g.removeClass("disabled");
            c = 1 > b - 1 ? 1 : a.leaps && b - 1 >= a.maxVisible ? Math.floor((b - 1) / d) * d : b - 1;
            g.first().toggleClass("disabled", 1 === b).attr("data-lp", c).find("a").attr("href", h(c));
            m = 1 == a.maxVisible ? 0 : 1;
            c = b + 1 > a.total ? a.total : a.leaps && b + 1 < a.total - a.maxVisible ? l + a.maxVisible + m : b + 1;
            g.last().toggleClass("disabled", b === a.total).attr("data-lp",
            c).find("a").attr("href", h(c));
            d = g.filter("[data-lp=" + b + "]");
            if (!d.not(".next,.prev").length) {
                var j = b <= l ? -a.maxVisible : 0;
                g.not(".next,.prev").each(function (b) {
                    c = b + 1 + l + j;
                    f(this).attr("data-lp", c).toggle(c <= a.total).find("a").html(c).attr("href", h(c))
                });
                d = g.filter("[data-lp=" + b + "]")
            }
            d.addClass("disabled");
            k.data("settings", a)
        }
        function h(e) {
            return a.href.replace(a.hrefVariable, e)
        }
        var k = this,
            a = f.extend({
                total: 0,
                page: 1,
                maxVisible: null,
                leaps: !0,
                href: "javascript:void(0);",
                hrefVariable: "{{number}}",
                next: "&raquo;",
                prev: "&laquo;"
            }, k.data("settings") || {}, n || {});
        if (0 >= a.total) return this;
        !f.isNumeric(a.maxVisible) && !a.maxVisible && (a.maxVisible = a.total);
        k.data("settings", a);
        return...