Thursday, April 14, 2011

Pagination with UITableView in IOS Development[updated]

Drag to refresh and click to load more is very popular in iOS apps, however, I'm still favor the "Pre", "Next" old style. This post will show you how to implement it in UITableView.





As you can see from the screenshot, we're going to add the pagination bar in the UITableView's footer. In the pagination bar, we're going to add a text label to show current page number, a Previous button and a Next button. The two buttons are set target to "nextPage" method.

- (UIView *) paginationView {
    
    UIView *paginationView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320, 40.0)];
    
    //create Current Page No Label
    
    UILabel *pageLabel = [[UILabel alloc] initWithFrame:CGRectMake(140, 5, 70, 25)];
    
    pageLabel.text= [@"page " stringByAppendingFormat:@"%d",pageNo];
    pageLabel.tag=PAGE_LABEL_TAG;
    
    [paginationView addSubview:pageLabel];
    
    
    //create Previous button
    UIButton *preButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    preButton.frame = CGRectMake(20, 5,60, 25);

    [preButton setTitle:@"Pre" forState:UIControlStateNormal];
    
    
    [preButton addTarget: self action: @selector(nextPage:)
        forControlEvents: UIControlEventTouchUpInside];
    
    preButton.tag = PRE_BUTTON_TAG;
    
    //hide Pre button in the first page
    if (self.pageNo==1) {
        
        preButton.hidden = YES;
            }
    
    [paginationView addSubview:preButton];  
    

    
    //create next button
    UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    nextButton.frame = CGRectMake(240, 5,60, 25);

    [nextButton setTitle:@"Next" forState:UIControlStateNormal];
    
    /* Prepare target-action */
    [nextButton addTarget: self action: @selector(nextPage:)
         forControlEvents: UIControlEventTouchUpInside];
    nextButton.tag = NEXT_BUTTON_TAG;
    
    [paginationView addSubview:nextButton];
    
    return paginationView;
}




Then add pagination bar into footer:

- (void)viewWillAppear:(BOOL)animated
{
    UITableView *tableView = (UITableView *) self.view;
       
    tableView.tableFooterView = [self paginationView];
    
    [super viewWillAppear:animated];
}

The last part is the nextPage method, where we will load data and refresh the table view.

-(void) nextPage:(UIButton *)button{
    
    if (button.tag==NEXT_BUTTON_TAG) {
        
         self.pageNo= self.pageNo+1;
        
    }else {
        
         self.pageNo= self.pageNo-1;
        
               
    }
    
    UIButton *preButton = (UIButton *)[self.view viewWithTag:PRE_BUTTON_TAG];
    
    //hide Pre button in the first page
    if (self.pageNo<=1) {
        
        preButton.hidden = YES;
        
    } else {
        //unhide preButton 
        preButton.hidden = NO;
    }


    
    UILabel *pageLabel = (UILabel *)[self.view viewWithTag:PAGE_LABEL_TAG];
    
    pageLabel.text= [@"page " stringByAppendingFormat:@"%d",pageNo];
    //[pageLabel setText:<#(NSString *)#>
    
    PaginationData *pageData = [[PaginationData alloc] init];
    self.data = [pageData dataInPage:self.pageNo];
    
    //[pageData release];
     
    //reload data and scroll to the first record
    [self.tableView reloadData];
    [self.tableView scrollRectToVisible:CGRectMake(0, 0, 1, 1) animated:NO];
    
    
}

UPDATE about PaginationData:

PaginationData is just my mock data to hold items for each page. It's nonsense for you actually. However, I will show you here since some people interested.

#import "PaginationData.h"


@implementation PaginationData


-(id) init{
    
    self = [super init];
    if (self) {       
        
        data = [[NSMutableArray alloc] init];    
    }
    return self; 
    
}

-(NSArray *) dataInPage:(NSInteger)pageNo {

    
    for(int i=1;i<=10;i++){
        
        NSInteger itemNo = (pageNo-1)*10+i;
        
        NSString *line = [[NSString alloc] initWithFormat:@"This is test item %d", itemNo];
        
      
        
        [data addObject:line];
    }
    
    return  data;
    
}

- (void) dealloc{
    
    [data release];
    
    [super dealloc];
    
}
@end


3 comments:

HaRt_kHoR said...

hi there, can u show the class PaginationData?

~RaV3n~ said...

yes i wanna take a look at PaginationData class too :) ... Btw nice tutorial..

Ke Cai said...

Hi, PaginationData class is provided.
It's just mock data.