Grouped pagination links function in JavaScript


I just created a JavaScript port of an awesome bit of pagination code I first used years and years ago while working in Classic ASP, originally written by Dave Child who I was working with at the time. The original can be found on this site here.

It’s an awesome script when you have 100′s of pages of data (which probably suggests you need to implement some good filtering and search features to save your poor users..) and presents the links like so..

« Prev 1 2 3 … 7 [8] 9 … 208 209 210 Next »

function BuildGroupedPagination(current_page, total_pages, base_url, seperator) 
{ 
	var url = base_url; 
	var strPages = ""; 
	var intMaxPages = 0;
	var intMinPages = 0;
	var intPaginI = 0;

    if (typeof(seperator) == 'undefined')
    {
        seperator = " ";
    }

	if (total_pages > 10) 
	{ 
		if (total_pages > 3) 
		{ 
			intMaxPages = 3;
		}
		else 
		{
			intMaxPages = total_pages;
		} 

		for (intPaginI = 1; intPaginI <= intMaxPages; intPaginI++) 
		{

			if (intPaginI == current_page) 
			{ 
				strPages += "<strong>[" + intPaginI + "]</strong>";
			}
			else 
			{
				strPages += "<a href=\"" + url + intPaginI + "\">" + intPaginI + "</a>";
			} 

			if (intPaginI < intMaxPages) 
			{ 
				strPages += seperator;
			} 
		} 

		if (total_pages > 3) 
		{ 
			if ((current_page > 1) && (current_page < total_pages)) 
			{ 
				if (current_page > 5) 
				{ 
					strPages += " ... ";
				}
				else 
				{
					strPages += seperator;
				} 

				if (current_page > 4) 
				{ 
					intMinPages = current_page;
				}
				else 
				{
					intMinPages = 5;
				} 

				if (current_page < total_pages - 4) 
				{ 
					intMaxPages = current_page;
				}
				else  
				{
					intMaxPages = total_pages - 4;
				} 

				for (intPaginI = intMinPages - 1 ; intPaginI <= intMaxPages + 1; intPaginI++) 
				{
					if (intPaginI == current_page) 
					{ 
						strPages += "<strong>[" + intPaginI + "]</strong>";
					}
					else 
					{
						strPages += "<a href=\"" + url + intPaginI + "\">" + intPaginI + "</a>";
					}

					if (intPaginI < intMaxPages + 1) 
					{ 
						strPages += seperator;
					}
				}

				if (current_page < total_pages - 4) 
				{ 
					strPages += " ... ";
				}
				else 
				{
					strPages += seperator;
				} 
			}
			else 
			{
				strPages += " ... ";
			} 

			for (intPaginI = total_pages - 2; intPaginI <= total_pages; intPaginI++) {
				if (intPaginI == current_page) { 
					strPages += "<strong>[" + intPaginI + "]</strong>";
				}
				else {
					strPages += "<a href=\"" + url + intPaginI + "\">" + intPaginI + "</a>";
				} 

				if (intPaginI < total_pages) { 
					strPages += seperator;
				} 
			} 
		}
	}
	else 
	{
		for (intPaginI = 1; intPaginI <= total_pages; intPaginI++) 
		{
			if (intPaginI == current_page) 
			{ 
				strPages += "<strong>" + intPaginI + "</strong>"; 
			}
			else 
			{
				strPages += "<a href=\"" + url + intPaginI + "\">" + intPaginI + "</a>";
			} 

			if (intPaginI < total_pages) 
			{ 
				strPages += seperator;
			}
		}
	}
	return strPages;
}
  1. #1 by Dave Child on November 10, 2011 - 10:56

    Lovely bit of code, Shaw :)

  2. #2 by Gareth on November 10, 2011 - 12:28

    I just use the MVC example class PaginatedList here:

    http://www.asp.net/mvc/tutorials/implement-efficient-data-paging

    Nice JS tho :)

  3. #3 by shawson on November 10, 2011 - 14:47

    But Bradley, this gives you so much more than just a couple of arrows!

  4. #4 by AlexB on November 2, 2012 - 10:34

    Hey Shawn, something is strange in your code.
    Why did you checked total_pages twice, when obviously the second “if” is not needed:

    if (total_pages > 10)
    {
    if (total_pages > 3)
    {

  5. #5 by shawson on January 5, 2013 - 21:44

    Good point- that second if will always be true Never noticed that before, and I’ve been using this snippet for years!

(will not be published)


I absolutely love these. They came at the lace wigs are good quality, and very soft. Absolutely love these extensions. I just love this hair. Hair came on time, I waited until after hair extensions uk very full, no shedding and it is been installed for 3 weeks now and yes I jus ordered 3 more bundles. Lol. I definitely recommend this company for your bundles ladies. They are soft, hair bundles on the head for human hair wigs and I would continue to recommend them. I have thinner hair so they cover and blend nicely.