Create jQuery based pagination Part 2

In the previous tutorial on how to “Create jQuery base Pagination”, we were able to group elements and show them when their corresponding link (li) is clicked. However, the links were added manually.

As I was developing a WordPress website for a client, it occurred to me that the links have to be added automatically. For each existing page, there should be a corresponding link (li) and it must be created dynamically because most clients are not savvy enough to add the links manually.

Below is how I solved the problem:

$('.pageGroup').each(function() { // For each existing  “.pageGroup” (Each page)
  $('<li></li>').appendTo('#paginator-nav ul'); // Add one “li” to “#paginator-nav ul'

If we leave the above the way it is, we will have a bunch of circles without numbers. This means that the client has to add the numbers by himself and that is not possible. I had to find a way to number the navigation automatically and in the order that they appear.

$('#paginator-nav li').each(function(i,el) { // each “li”
 var liNumber = i+1; // liNumber equals 1 and  Increases by 1 each time it appears
$(this).text(liNumber);  // Use liNumber as the text for each of the LI’s

See working and editable example below:

That is it, we’re done.
if you have any questions or if you have any suggestions, please share.

Leave a Reply