Server side pagination in UI-GRID of angualrjs

0
votes

I know how to do Client side pagination using UI-GRID of AngularJS. But I want to know Server-side pagination using UI-GRID of AngularJS. Means on clicking on next page, results of only next page are retrieved from Server and shown to the user. I have searched alot but could not found any PROPER solution.

It would be great if you could provide Plunker as sample code.

Thanks in advance.

1
angularjsasp.net-mvcpagination

1 Answers

0
votes

If you are using Entity Framework use Take and Skip extension method with the help of OrderBy like

context.YourTable.OrderByDescending(sort).Skip(skipRows).Take(pageSize).ToList();

If you are using sql queries then use OFFSET and FETCH with the help of order by like

SELECT * FROM YourTable order by SomeRow desc 
OFFSET @skipRows -- skip 10 rows
FETCH NEXT @pageSize ROWS ONLY;

Strategy

  1. Pass the PageSize to the server side function or API as pageSize (say 10)

  2. Pass the skipRows to the server side. So suppose you are on page 3 then

    skipRows = pageSize * (page -1)

So when you are on page 3 then skipRows value will become (10 * 2 = 20) and hence from server side you will get the next 10 rows after skipping 20 rows.

EDIT 1 : How to setup the UI Grid

Set useExternalPagination true and use gridApi.pagination.on.paginationChanged to track the page changes and get the data

You can refer this plnkr