"Ajax Pagination-Modified verison of bootpag which work on bootstrap 2.3.2"
Bootstrap 2.3.2 Snippet by keshavkatwe

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div id="content">Dynamic Content goes here</div> <div id="page-selection">Pagination goes here</div> <script> // init bootpag $('#page-selection').bootpag({ total: 10, page: 1 }).on("page", function(event, /* page number here */ num){ document.getElementById('content').innerHTML = num; }); </script> </div> </div>
(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: "»", prev: "«" }, 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 this.each(function() { var e, b, c = f(this), d = ['<div class="pagination"><ul class="bootpag">']; a.prev && d.push('<li data-lp="1" class="prev"><a href="' + h(1) + '">' + a.prev + "</a></li>"); for (b = 1; b <= Math.min(a.total, a.maxVisible); b++) d.push('<li data-lp="' + b + '"><a href="' + h(b) + '">' + b + "</a></li>"); a.next && (b = a.leaps && a.total > a.maxVisible ? Math.min(a.maxVisible + 1, a.total) : 2, d.push('<li data-lp="' + b + '" class="next"><a href="' + h(b) + '">' + a.next + "</a></li>")); d.push("</ul></div>"); c.find("ul.bootpag").remove(); c.append(d.join("")); e = c.find("ul.bootpag"); c.find("li").click(function() { var a = f(this); a.hasClass("disabled") || (a = parseInt(a.attr("data-lp"), 10), j(e, a), k.trigger("page", a)) }); j(e, a.page) }) } })(jQuery, window);

Related: See More


Questions / Comments: