Pagination in UITableview

Posted By : Ashish Tyagi | 29-Aug-2013

Pagination is used to show large data on a table in an effective way.There are some advantage of using pagination in your app :

  1. 1.Load relatively less amount of data on startup. This increases startup loading speed and populates the table with data faster.
  2. 2.Whenever the user scrolls to bottom of UITableView visible cell, the app automatically starts fetching for the next batch of data.

Now, We are going to implement pagination in such a way,only 10 item is displayed on UITableView and rest of data will be displayed on scrolling.

 

Step 1>:  First create a new Single view Controller project and open viewController.h

  Declare these variable as given below or Change the content of your file with this code.

#import <UIKit/UIKit.h>

@interface ViewController :UIViewController<UITableViewDataSource,UITabBarDelegate>{

    UIActivityIndicatorView *spinner;

}

@property (strong, nonatomic) IBOutlet UITableView *tableView;
@property (strong, nonatomic) NSMutableArray *dataArray;
@property (nonatomic) BOOL noMoreResultsAvail;
@property (nonatomic) BOOL loading;
@end

 

Step 2>:  Now open your xib file  and drag and drop a TableView and set their delegate and datasource outlet.

              Don't forget to connect to reference outlet of your tableView to tableview(variable in self.viewController.h)


Step 3>:  In self.viewController.m file, Create UITableView datasource method, a Scroll delegate method which called when user scroll down the TableView for populating new data on table.

Here a user defined method is used for generating new data for table as given in following code

In self.viewController.m file

 
- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.noMoreResultsAvail =NO;
    self.dataArray =[[NSMutableArray alloc] init];
    for (int i = 1; i<=10 ; i++) {
        [self.dataArray addObject:@"First time visible item list"];
    }
    self.tableView.backgroundColor = [UIColor lightTextColor];
}
#pragma UITableView DataSource Method ::

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    if([ self.dataArray count] ==0){
        return 0;
    }
    else {
        return [self.dataArray count]+1;
    }
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    static NSString *cellIndentifier =@"cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIndentifier];
    if(cell == nil){
    
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIndentifier];
    }
    
    if (self.dataArray.count != 0) {
        if(indexPath.row <[self.dataArray count]){

        cell.textLabel.text =[self.dataArray objectAtIndex:indexPath.row];
        }
        else{
 if (!self.noMoreResultsAvail) {
                spinner.hidden =NO;
                cell.textLabel.text=nil;
                spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
                spinner.frame = CGRectMake(150, 10, 24, 50);
                [cell addSubview:spinner];
                if ([self.dataArray count] >= 10) {
                    [spinner startAnimating];
                }
            }
            else{
                [spinner stopAnimating];
                spinner.hidden=YES;
                
                cell.textLabel.text=nil;
                
                UILabel* loadingLabel = [[UILabel alloc]init];
                loadingLabel.font=[UIFont boldSystemFontOfSize:14.0f];
                loadingLabel.textAlignment = UITextAlignmentLeft;
                loadingLabel.textColor = [UIColor colorWithRed:87.0/255.0 green:108.0/255.0 blue:137.0/255.0 alpha:1.0];
                loadingLabel.numberOfLines = 0;
                loadingLabel.text=@"No More Video Available";
                loadingLabel.frame=CGRectMake(85,20, 302,25);
                [cell addSubview:loadingLabel];
            }
            
        }
    }
    return cell;
}

#pragma UIScrollView Method::
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    if (!self.loading) {
        float endScrolling = scrollView.contentOffset.y + scrollView.frame.size.height;
        if (endScrolling >= scrollView.contentSize.height)
        {
            [self performSelector:@selector(loadDataDelayed) withObject:nil afterDelay:1];
}
    }
}

#pragma UserDefined Method for generating data which are show in Table :::
-(void)loadDataDelayed{
    
    NSMutableArray *array = [NSMutableArray arrayWithCapacity:10];
    for (int i=1; i<=10 ; i++) {
        [array addObject:[NSString stringWithFormat:@"Visible Item No ::%d",i]];
    }
    [self.dataArray addObjectsFromArray:array];
    [self.tableView reloadData];
}

        

 

Step 4>: noMoreResultsAvail Bool is used here to check whether data is enough to show on table or not. if data is not enough then a text "No More data Available" is shown on last cell of your Table.

Download Full Sample code

About Author

Author Image
Ashish Tyagi

Ashish is a iPhone application developer with experience in Objective-C , Titanium and Phonegap frameworks. Ashish loves watching movies in his free time.

Request for Proposal

Name is required

Comment is required

Sending message..