Javascript pagination

In this assignment you have to build a javascript pagination that will help the users to navigate through different record sets.

Javascript pagination: Basic Functionality

This is how the pagination functionality will work :

  • Set the number of ‘recordset’ you want to display on the page
  • Load the items from an array. The array can consist of just the names of guest for now
  • The code should generate links to record sets depending on the total number of items in the array divided by recordset
  • For eg. if you have 90 records in the array and your recordset per page is set to 10, than it should generate 9 links with numbers 1 to 9
  • Clicking on each number should load the recordset accordingly for eg. if I click on number ‘5’ it should load recordset from 41-50
  • It should also apply class ‘active’ to the current recordset number

Javascript pagination: Advance Functionality

You can add a little smartness to the feature by adding the following functionality :

  • Generate ‘Next’ and ‘Previous’ links along with the numbers
  • Cliking on ‘Next’ and ‘Previous’ should switch to next and previous record set
  • It should also switch the active link while switching recordsets
  • Previous should only come when you are not on first recordset
  • Next should disappear when you are on last recordset
  • Finally generate a select element (dropdown) with number of pages and update the recordset when the user changes the number in this

Javascript pagination : Hints

You will have to make use of the following javascript concepts:

  • Events
  • Arrays
  • Functions
  • If/else construct
  • Loops
  • Functions
  • DOM Manipulation

Javascript pagination : Planning the logic

You will need to perform the following tasks

  • Read the items from the array and display the first recordset in the Div or Unordered list
  • Set counter for the current recordset.On load it should be 1.
  • Generate links for each record sets
  • Clicking on each link will update counter and refresh the recordset
  • Add class ‘active’ to the current recordset number.
  • Next and Previous will increment the counter and refresh the recordset. It will also update the active link in the pages
  • Populate the select(drop down) with the number of recordset
  • On change of drop update the recordset

Find this challenging? Give it a spin.

Trying solving the assignment using any of the online editors and send me an email if you need any help or feedback on your code.