Beautify WebPage with Pagination

Greycampus
Posted by Greycampus under JavaScript category on | Points: 40 | Views : 1992
Pagination could make a page look very clean interms of huge data. It is the process of dividing electronic or web pages into discrete or printed pages. Basically it is used for such things as displaying a limited number of results on search engine results pages to divide returned data and display it on multiple pages.
*Pagination also includes the logic of preparing and displaying the links to the various pages.

Implementing Pagination Using Javascript

Firstly, Declaring a variable and assigning some value (Example 50).
var myPage = 50;

Every search results the number of output the query has retrieved, so calling out a function to check the condition to limit the number or results that must shown on the page.
function myPagination() {
if (objJson.length > 50) {
document.getElementById("nextPage").style.visibility = "visible"; //if result is greater than 50
}

if (someVar <= 50) {
document.getElementById("prevPage").style.visibility ="hidden";// if result is less than or equal to 50
} else {
document.getElementById("prevPage").style.visibility = "visible";
}
}

Conditioning the result with number of outcomes, if number greaters 50 then visibility is applied and if number lesser or equals 50 then hidden is applied. On each call, we are redirecting the function to either "nextpage" or "prevpage" , which would be calling in the next section.
For nextPage :
function nextPage() {
document.getElementById("listingTable").innerHTML = "";

if (someVar < objJson.length) {
document.getElementById("nextPage").style.visibility = "visible";
} else {
document.getElementById("nextPage").style.visibility = "hidden";
}

for (var i = someVar - 50; i < someVar; i++) {
document.getElementById("listingTable").innerHTML += objJson[i].adName + "<br>";
}

someVar += 50;

document.getElementById("prevPage").style.visibility = "visible";
}


For prevPage :
function prevPage() {
document.getElementById("listingTable").innerHTML = "";

if (someVar > 50) {
document.getElementById("prevPage").style.visibility = "visible";
} else {
document.getElementById("prevPage").style.visibility = "hidden";
}

for (var i = someVar - 50; i < someVar; i++) {
document.getElementById("listingTable").innerHTML += objJson[i].adName + "<br>";
}

someVar -= 50;

document.getElementById("nextPage").style.visibility = "visible";
}

It must be included in HTML , Adding buttons and calling suitable function on clicking the button.
Suggestion: I would recommend to get Beginner to Advanced javascript training at GreyCampus. Check out http://www.greycampus.com/java-script-training-instructor-led here.

Comments or Responses

Login to post response