I want to implement pagination in iOS tableview

Question

I need to implement horizontal pagination like google in iOS tableview. Is there any way we can do this using a single tableview? Could you suggest a way to do this?

Answer 1

I'd suggest you to use a UICollectionView instead of UITableView. That being said, in order to load paginated data from your server you'll need to add a couple lines of code: You need to add variables in your view controller in order to keep track of your data:

/**
 *  Set this flag when loading data.
 */
@property (nonatomic, assign) BOOL isLoading;


/**
 *  Set this flag if more data can be loaded.
 */
@property (assign, nonatomic) BOOL hasNextPage;


/**
 *  The current page loaded from the server. Used for pagination.
 */
@property (assign, nonatomic) int currentPage;

Depending on what implementation you use, there are the different methods to implement in which we'll check if it's the right time to load data or not.

UITableView

And in your UITableViewDelegate implementation add:

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {

    // Check scrolled percentage
    //
    CGFloat yOffset = tableView.contentOffset.y;
    CGFloat height = tableView.contentSize.height - tableView.height;
    CGFloat scrolledPercentage = yOffset / height;


    // Check if all the conditions are met to allow loading the next page
    //
    if (scrolledPercentage > .6f && !self.isLoading && self.hasNextPage)
        [self loadNextPage:++self.currentPage];
}

UICollectionView

And in your UICollectionViewDelegate implementation add:

- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath {

    // Check scrolled percentage
    //
    CGFloat yOffset = collectionView.contentOffset.y;
    CGFloat height = collectionView.contentSize.height - collectionView.height;
    CGFloat scrolledPercentage = yOffset / height;


    // Check if all the conditions are met to allow loading the next page
    //
    if (scrolledPercentage > .6f && !self.isLoading && self.hasNextPage)
        [self loadNextPage:++self.currentPage];

}

---

Then to load the next page:

- (void)loadNextPage:(int)pageNumber {
    if (self.isLoading) return;
    self.isLoading = YES;

    // Fetch your data here
    // ..

    // Once the request is finished, call this
    self.isLoading = NO;
}

I would also suggest you to check for the scrolling direction and add it as a condition to load the next page. This answer explains how to perform that.

Answer 2

UITableView is a subclass of a UIScrollView. DO this in the UITableView delegate:

- (void)scrollViewDidScroll:(UIScrollView *)aScrollView {
    CGPoint offset = aScrollView.contentOffset;
    CGRect bounds = aScrollView.bounds;
    CGSize size = aScrollView.contentSize;
    UIEdgeInsets inset = aScrollView.contentInset;
    float y = offset.y + bounds.size.height - inset.bottom;
    float h = size.height;
    float reload_distance = 10;
    if(y > h + reload_distance) {
        NSLog(@"load more rows");
    }
}

If you are getting data from a web service and if the service supports pagination then you can achieve this. if(y > h + reload_distance) is true the make the call to load more data from web service and then reload table view. Hope this helps.. :)

Answer 3

You have 2 options for your requirement 1.Scrollview with pagination and creating UI design on it. 2. Tableview with transformation i mean horizontal tableview.

If you sure scrollview memory will be high when compared to tableview because you need to create many view on pagination. If you use tableview it will be easy to code and handle memory also.

Below is the code for transforming tableview.

UITableView* menuTableView=[[UITableView alloc]initWithFrame:CGRectMake(0, 60, 320, 404) style:UITableViewStylePlain];
menuTableView.delegate=self;
menuTableView.dataSource=self;
CGAffineTransform transform = CGAffineTransformMakeRotation(-1.5707963);
menuTableView.transform = transform;
// Repositions and resizes the view.
CGRect contentRect = CGRectMake(0, 90, 320, 300);
menuTableView.frame = contentRect;
menuTableView.pagingEnabled= YES;
menuTableView.separatorColor=[UIColor grayColor];
[self.view addSubview:menuTableView];

Hope this will help you.. if you need any additional information let me know

Answer 4

Where are you getting your data from? If you have an API layer you could build data paging into the API method. To reduce the amount of actual data that is being passed back and forth.

You can achieve this with a single tableView. You need to define your number of sections, and number of items per section.