Reputation: 25233

Paging with Jquery in ASP.NET

I want to implement paging in Repeater via JQuery. Is it possible? If yes, then how I achieve this?

Upvotes: 2

Answers (4)

pashute

Reputation: 4063

In server side you have to change the "viewmodel" - the returned records from the database, along with some extra information: so that it includes three more variables: currentPage rowsPerPage and totalRows for query.

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

You then have to make a paginating "webcontrol" or manually run all of the parts yourself with javascript/jquery code. the pagination control typically has a Previous-Page (<<) and a Next-Page (>>) button a Total number of records, and numbers of the next pages to come, or a CurrentPage textbox with a dropdown to choose from.

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

The number of rows per page can usually be set by the user, perhaps with some options through a dropdown. This feature can typically be optionally hidden or made read-only.

Once a page change is made the current page number (1 based) is changed not passing the last or first... and showing the rows for that page. The math for that is :

 firstRowOnCurrentPage = (currentPage - 1) * rowsPerPage;

The last row is at most:

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

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

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

For a client-side-only repeater with paging, (i.e. calls the database once and then gives the result into a 'database model' object, all paging done with this data, no second call to the database) you would bind to the local array.

Last but not least, for client-side only, you need to take care of updating modified and deleted data, or refreshing, with an Update/Refresh set of buttons.

Upvotes: 0