Paging with jQuery in ASP.NET

On the server side, you have to modify the "viewmodel" returned records from the database, as well as some additional information to include three more variables: currentPage rowsPerPage and totalRows for the query.

For client side only paging (calling the database and getting all rows showing a different subset each time), you must add the row number to your data and have a variable for rowsPerPage and the current page.

Then you need to do paginating "webcontrol" or manually run all the parts yourself with javascript / jquery code. a pagination control typically has a Previous Page (<lt;) and Next Page (→) buttons. Total number of records and next page numbers or CurrentPage text box with drop down list to select,

If you are on the last page then NextPage is disabled. Ditto for PreviousPage if you are on the first page. Usually the current page number is marked somehow (colored or highlighted in bold).

The number of lines per page can usually be set by the user, possibly with some options in a dropdown list. This feature can usually be hidden or read-only.

After changing the page, the current page number (1 based) is changed without passing the last or first ... and showing the lines for that page. The math for this:

 firstRowOnCurrentPage = (currentPage - 1) * rowsPerPage;

      

        
        
        
      

    

The last line is at most:

 maxLastRowOnCurrentPage =  firstRowOnCurrentPage + (rowsPerPage - 1) // if there are enough records, or the remaining records for the last page. 

      

        
        
        
      

    

The records are retrieved using a stored procedure SQL query in ajax (in your webservice page you have GetWhatever (i.e. GetProducts or in NancyFX it will just be the / Products module, and in MVC a / Products controller ...) which calls the base data and retrieves only that number of records Your repeater automatically repeats this.

See here for MS SQL example or here for PHP and mySQL example .

For a client-side relay with a paging call (ie, calls the database once and then yields the result to the "database model" object, all paging done on that data, without a second call to the database) to the local array.

Last but not least, for the client side, you need to take care of updating the modified and deleted data, or updating with an update / update kit.