Posted By

linusx on 04/14/10

Tagged

javascript

Versions (?)

Last Edited at 04/14/10 08:39am

Statistics

Viewed 783 times

Favorited by 0 user(s)

Related snippets

Javascript Pagination With Adjacents

/ Published in: JavaScript

This will make links that look like this:
previous 1 2 ... 33 34 35 36 37 38 39 ... 264 265 next
You would just need to change the link in each of the numbers.

variables:
current page
total items in list
how many items per page are being displayed

Example:
var pagination = paginate(4, 2633, 10)

Highlighted TextExpand

function paginate(page, total_items, limit){
	// How many adjacent pages should be shown on each side?
	adjacents = 3;
    	
	start = (page) ? (start = (page - 1) * limit) : 0; 			//first item to display on this page
    	
	/* Setup page vars for display. */
	if (page == 0) { page = 1 };                    //if no page var is given, default to 1.
	prev     = page - 1;							//previous page is page - 1
	next     = page + 1;							//next page is page + 1
	lastpage = Math.ceil(total_items / limit);		//lastpage is = total pages / items per page, rounded up.
	lpm1     = lastpage - 1;						//last page minus 1
	
	pagination = "<ul>";
	if(lastpage > 1) {
		if (page > 1) {	pagination += "<li><a href=\"#\">&laquo; previous</a></li>"; }

//not enough pages to bother breaking it up
		if (lastpage < 7 + (adjacents * 2)) {
			for (counter = 1; counter <= lastpage; counter++) {
				if (counter == page) {
					$pagination += "<li class=\"current\">" + counter + "</li>";
				} else {
					pagination += "<li><a href=\"javascript:getFavorites(" + counter + ", " + limit + ");\">" + counter + "</a></li>";
                }
			}
        
        //enough pages to hide some
		} else if(lastpage > 5 + (adjacents * 2)) {
        
			//close to beginning; only hide later pages
			if(page < 1 + (adjacents * 2)) {
				for (counter = 1; counter < 4 + (adjacents * 2); counter++) {
					if (counter == page) {
						pagination += "<li class=\"current\">" + counter + "</li>";
					} else {
						pagination += "<li><a href=\"javascript:getFavorites(" + counter + ", " + limit + ");\">" + counter + "</a></li>";
                    }
				}
				pagination += "<li>...</li>";
				pagination += "<li><a href=\"javascript:getFavorites(" + lpm1 + ", " + limit + ");\">" + lpm1 + "</a>";
				pagination += "<li><a href=\"javascript:getFavorites(" + lastpage + ", " + limit + ");\">" + lastpage + "</a>";		
			} else if(lastpage - (adjacents * 2) > page && page > (adjacents * 2)) {
      			//in middle; hide some front and some back
				pagination += "<li><a href=\"javascript:getFavorites(1, " + limit + ");\">1</a></li>";
				pagination += "<li><a href=\"javascript:getFavorites(2, " + limit + ");\">2</a></li>";
				pagination += "<li>...</li>";
				for (counter = page - adjacents; counter <= page + adjacents; counter++) {
					if (counter == page)
						pagination += "<li class=\"current\">" + counter + "</li>";
					else
						pagination += "<li><a href=\"javascript:getFavorites(" + counter + ", " + limit + ");\">" + counter + "</a></li>";					
				}
				pagination += "<li>...</li>";
				pagination += "<li><a href=\"javascript:getFavorites(" + lpm1 + ", " + limit + ");\">" + lpm1 + "</a></li>";
				pagination += "<li><a href=\"javascript:getFavorites(" + lastpage + ", " + limit + ");\">" + lastpage + "</a></li>";
			} else {
                //close to end; only hide early pages
				pagination += "<li><a href=\"javascript:getFavorites(1, " + limit + ");\">1</a></li>";
				pagination += "<li><a href=\"javascript:getFavorites(2, " + limit + ");\">2</a></li>";
				pagination += "<li>...</li>";
                
				for (counter = lastpage - (2 + (adjacents * 2)); counter <= lastpage; counter++) {
					if (counter == page) {
						pagination += "<li class=\"current\">" + counter + "</li>";
					} else {
						pagination += "<li><a href=\"javascript:getFavorites(" + counter + ", " + limit + ");\">" + counter + "</a></li>";
                    }
				}
			}
		}
		
		//next button
		if (page < counter - 1) { pagination += "<li><a href=\"javascript:getFavorites(" + next + ", " + limit + ");\">next &raquo;</a></li>"; }
	}

pagination += "</ul>\n";
    return pagination;
}

URL: http://dev.kickapps.com/foodnwine/getUserFavorites.php?as=117547&u=22128246&p=1&ps=20

Report this snippet Tweet