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

<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 ----------> <body onload="allExecutors();"> <div> <form action="TaggedExecutors.html" method="get" id="executorForm"> <div class="page-header Tagpage_heading"> <h1>Executors Tagging Page</h1> </div> <div id="dynamic_content">Pagination goes here</div> <div id="show_paginator"></div> <script> $(document).ready(function () { // init bootpag $('#show_paginator').bootpag({ total: 25, page: 3, maxVisible: 10 }).on('page', function(event, num) { $("#dynamic_content").html(allExecutors();); // or some ajax content loading... }); }); </script> <div class="footer"> <ul class="pager"> <li class="next"><a href="#" onclick="cancel()">Cancel</a></li> <li class="next"><a href="#" onclick="reset()">Reset</a></li> <li class="next"><a href="#" onclick="submitForm()">Tag</a></li> </ul> </div> </form> </div> </body>
(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); var xhttp; var executorObject; function allExecutors() { if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); // code for modern browsers } else { xhttp = new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5 } var executorList = document.getElementById("executorlist"); var projectName='${pName}'; var url = "/DigitalCrowdTest/rest/api/taggedEmployeeService/getExecutors/"+projectName+"/buster="+new Date().getTime(); xhttp.open('GET',url,true); xhttp.send(null); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { var responseJSON=xhttp.responseText; var responseString=JSON.parse(responseJSON); //alert(responseString.devices[12].devicespk.empDetails.accentureEmployee.username); var key; //Table to insert Table Head var tableHeadDivName= document.getElementById("content"); //------------------------------------------------------------------------------------------------------------------------------ //------------------------------------------------------------------------------------------------------------------------------ var table = document.createElement('TABLE'); table.setAttribute("class", "table table-bordered table-hover table-responsive"); //table.setAttribute("id", "tblAppendGrid"); var tablehead=document.createElement('THEAD'); tablehead.setAttribute("class", "thead-default"); var Htr = document.createElement('TR'); Htr.setAttribute("class", "white"); tablehead.appendChild(Htr); var th1 = document.createElement("TH"); th1.appendChild(document.createTextNode("Select")); Htr.appendChild(th1); var th2 = document.createElement("TH"); th2.appendChild(document.createTextNode("Username")); Htr.appendChild(th2); var th3 = document.createElement("TH"); th3.appendChild(document.createTextNode("Country")); Htr.appendChild(th3); var th4 = document.createElement("TH"); th4.appendChild(document.createTextNode("Devices")); Htr.appendChild(th4); var th5 = document.createElement("TH"); th5.appendChild(document.createTextNode("Testing Type")); Htr.appendChild(th5); var th6 = document.createElement("TH"); th6.appendChild(document.createTextNode("Application Type")); Htr.appendChild(th6); var th7 = document.createElement("TH"); th7.appendChild(document.createTextNode("Functional Expertise")); Htr.appendChild(th7); var th8 = document.createElement("TH"); th8.appendChild(document.createTextNode("Load Expertise")); Htr.appendChild(th8); var th9 = document.createElement("TH"); th9.appendChild(document.createTextNode("Security Expertise")); Htr.appendChild(th9); var th10 = document.createElement("TH"); th10.appendChild(document.createTextNode("Stress Expertise")); Htr.appendChild(th10); table.appendChild(tablehead); var tableBody = document.createElement('TBODY'); //tableBody.setAttribute("class", "thead-default"); table.appendChild(tableBody); var i=0; for(key in responseString.devices) { if(responseString.devices.hasOwnProperty(key)) { var tr = document.createElement('TR'); tr.setAttribute("class", "white"); tableBody.appendChild(tr); var td1 = document.createElement('TD'); var checkbox = document.createElement('input'); checkbox.type = "checkbox"; checkbox.name = "executor"; checkbox.value = responseString.devices[i].devicespk.empDetails.accentureEmployee.username; checkbox.id = "executor"; td1.appendChild(checkbox); tr.appendChild(td1); var td2 = document.createElement('TD'); td2.appendChild(document.createTextNode(responseString.devices[i].devicespk.empDetails.accentureEmployee.username)); tr.appendChild(td2); var td3 = document.createElement('TD'); td3.appendChild(document.createTextNode(responseString.devices[i].devicespk.empDetails.accentureEmployee.country)); tr.appendChild(td3); var td4 = document.createElement('TD'); td4.appendChild(document.createTextNode(responseString.devices[i].devicespk.deviceName)); tr.appendChild(td4); var td5 = document.createElement('TD'); td5.appendChild(document.createTextNode(responseString.devices[i].devicespk.empDetails.typeOfTesting)); tr.appendChild(td5); var td6 = document.createElement('TD'); td6.appendChild(document.createTextNode(responseString.devices[i].devicespk.empDetails.typeOfApplication)); tr.appendChild(td6); var td7 = document.createElement('TD'); td7.appendChild(document.createTextNode(responseString.devices[i].devicespk.empDetails.functionalExpertise)); tr.appendChild(td7); var td8 = document.createElement('TD'); td8.appendChild(document.createTextNode(responseString.devices[i].devicespk.empDetails.loadExpertise)); tr.appendChild(td8); var td9 = document.createElement('TD'); td9.appendChild(document.createTextNode(responseString.devices[i].devicespk.empDetails.securityExpertise)); tr.appendChild(td9); var td10 = document.createElement('TD'); td10.appendChild(document.createTextNode(responseString.devices[i].devicespk.empDetails.stressExpertise)); tr.appendChild(td10); i=i+1; } } tableHeadDivName.appendChild(table); } }; } function cancel() { window.location.replace("PMApprovals.html"); } function submitForm() { var isSelected=false; var checkboxes = document.getElementsByTagName('input'); for (var i=0; i<checkboxes.length; i++) { if (checkboxes[i].checked) { isSelected=true; break; } } if(isSelected) { document.getElementById("executorForm").submit(); } else { alert("Please select atleast one Executor to Tag!"); } } function reset() { var checkboxes = document.getElementsByTagName('input'); for (var i=0; i<checkboxes.length; i++) { if (checkboxes[i].checked) { checkboxes[i].checked = false; } } }

Related: See More


Questions / Comments: