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:

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

// MARK: - Pagingnation
struct Pagingnation {
    var pageNumber: Int
    var limit: Int
    var isAllLoaded: Bool = false
    var start: Int {
        return (pageNumber * limit)
    }

    init(_ pageNumber: Int = 0, limit: Int = 15) {// Max data in the response, from the pageNO.
        self.pageNumber = pageNumber
        self.limit = limit
    }
}

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.

// Variable Declaration(s)
    var objPagination: Pagingnation!

    // Variables for Pull to Refresh
    let refresh = UIRefreshControl()

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

func prepareData() {
        objPagination = Pagingnation()
        // Setup Pull to refresh
        tableView.refreshControl = refresh
        refresh.addTarget(self, action: #selector(refreshData), for: .valueChanged)
    }

// Reload data while pull to refresh
    @objc func refreshData() {
        objPagination = Pagingnation()
        webCall()
    }

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.

if self.objPagination.pageNumber == 0 {
      // empty array that is used to display data in the tableView
            self.arrBooks = [] 
        }

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.

let urlStr = baseURL + "startIndex=\(objPagination.start)&maxResults=\(objPagination.limit)"

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

if self.objPagination.limit > allBooks.count {
      self.objPagination.isAllLoaded = true
}

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

self.objPagination.pageNumber += 1

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

self.tableView.refreshControl?.endRefreshing()
self.tableView.reloadData()

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:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
              if (!objPagination.isAllLoaded && indexPath.row == arrBooks.count - 1) || arrBooks.isEmpty {
            webCall()
        }
    }

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.

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.

if let cell = cell as? DemoCell {
          cell.loader?.startAnimating()
 }

Build and Run the project.
That’s it!