Pagination with Bottom Loading

Today, we will cover a simple but important topic of TableView. As we are loading a huge amount of data in the tableView, it may take time to load these data. So the best solution that we have to overcome this loading time is to do Pagination. And to give this pagination a good outcome, we can add a bottom loader. You may have seen in many famous apps like – Facebook, Instagram, etc.

Let’s see, what is Pagination?

Pagination is the breakdown of the records into small parts as per requirement and adding the other parts of the record one-by-one. It decreases the loading time and saves internet data as much as possible. Mostly it is used where the data is huge and in the array or dictionary.

Bottom loading helps a user to understand that there is still more data to be loaded and that too without disabling the user interaction.

Without wasting time, let’s start with the project. Create a single view project, give the name -> Create. Take a tableView, complete all its steps, and integrate an API, so that we can add pagination in it.

Now, first of all, we’ll create a model to handle the pagination process, we have to create it according to the response we get and request that we have to give to the server. As my response is:

page_image1

And in the request, I have to pass startIndex and maxResult. So our model will be like this –

It will help us to handle the pagination process.
Now, we will create an object of the Pagination in the class where we have to use it.

Now initializing the variable and adding pull-to-refresh.

Invoke preparedata() method in the viewDidLoad().

Now, we have to make certain changes to the web-call code.

First of all add this code in the web-call method, before the response code.

It is for the data to be refreshed when pull-to-refresh or first call is made.

Now adding the pagination data in the URL.

Now if the data in the response is less then the max result. Then it will be the last data.

After the response is taken in the local variable, value of pageNo should be increased.

At last, on the web-Call, stop the refreshControl of tableView and reload it.

Now, one last step for the pagination. We have to call the webCall() method to load other data. We’ll do this when the last cell is to be loaded in the tableView. So in the willDisplayCell method of tableView, we’ll add following code:

All the steps of Pagination are now completed.

Now creating a bottom loader for it. Add cell and add activityIndicator in the controller of storyBoard and add constraints to keep it at the center.

page_image2

In the numberOfRowsInSection method add 1 for the indicator.
And in the cellForRowAt add a condition for the last cell and return cell that has an indicator in it.

To animate the activityIndicator write code in the willDisplayCell method, keep the condition for the last cell and add this in it.

Build and Run the project.
That’s it!

mm

Risabh Singh iOS Developer

“Converting Dream into Codes” I do things that I love, and programming is a big part of it. As a developer, I try to grab all that opportunity that is challenging. Working in the Yudiz solution, I got all the opportunity and challenges

Leave a Reply

Top