Randell's Tech Blog

Randell's Tech Blog


CodeIgniter: AJAX Pagination, part 2

Posted: 26 Jun 2009 09:13 AM PDT

It seems that I forgot to include an example of how to use the MY_Pagination class in my previous post regarding AJAX Pagination on CodeIgniter using jQuery, so here it is.

In this example, assume that the following functions are used inside a controller called Transactions.

The first function displays the first page:

function index() {     $this->load->model('Transaction_model');       $this->load->library('pagination');        $config['base_url'] = site_url('transactions/page/');     $config['total_rows'] = $this->Transaction_model->count_all();     $config['per_page'] = '20';       $this->pagination->initialize($config);       $this->load->vars(         array(             'transactions' => $this->Transaction_model->get_all($config['per_page']),             'pagination_links' => $this->pagination->create_ajax_links('transactions_all')         )     );       $this->template->render('home/transactions_all'); }

You’ll see that we load the library similar to how we load the original Pagination class. Note that you're NOT supposed to include the prefix.

Just assume that there is a Transaction_model model with a count_all function that returns the total number of transactions (should be integer, of course) and a get_all function that returns the query result as an array of objects.

You’ll notice several differences from the normal use of the Pagination class:

  • $config['base_url'] - using the non-ajaxified Pagination class, the value of your $config['base_url'] is the same as the full URL of the class/function where the current pagination initialization code block resides. If you’ve used the original Pagination class, you’ll notice that it causes the entire page to load and it also changes the URL in the address bar. That’s not what we want to achieve here.

    In this case, you’ll use the URL of the class/function of the second function that will load the pages in a pre-defined element.

  • create_ajax_links('transactions_all') - this is the function we created in my previous post. If you’ll remember, the transactions_all part is our target element (usually a div element) where the pages will be loaded.

Second function:

function page($offset = 0) {     $this->load->model('Transaction_model');       $this->load->library('pagination');       $config['base_url'] = site_url('transactions/page/');     $config['total_rows'] = $this->Transaction_model->count_all();     $config['per_page'] = '20';       $this->pagination->initialize($config);       $this->load->vars(         array(             'transactions' => $this->Transaction_model->get_all($config['per_page'], $offset),             'pagination_links' => $this->pagination->create_ajax_links('transactions_all')         )     );       $this->load->view('home/transactions_page'); }

You’ll notice that the second function is almost similar to the the first except for the following:

  • $offset - this function has an optional parameter that determines the offset for our model’s get_all function. Remember that we made this second function so that this offset doesn’t show in our address bar? Good.

The views: transaction_all and transaction_page.
Here is the code for transaction_all which simply loads the transaction_page.

<div id="transactions_all">     <?php echo $this->load->view('home/transactions_page'); ?> </div>

And here is the code for transaction page:

<?php if (count($transactions)): ?>     <table><tbody>         <tr>             <th>Date</th>             <th>Details</th>             <th>Amount</th>         </tr>         <?php foreach($transactions as $key => $transaction): ?>             <tr>                 <td><?php echo $transaction->transaction_stamp; ?></td>                 <td><?php echo $transaction->transaction_details; ?></td>                 <td><?php echo $transaction->transaction_amount; ?></td>             </tr>         <?php endforeach; ?>         <tr>             <td colspan="3"><?php echo $pagination_links; ?></td>         </tr>     </tbody></table> <?php else: ?>     No transactions found. <?php endif; ?>

Lastly, you might be wondering what in the world is the $this->template->render. You may refer to this library written by Carmelo Capinpin. I find the library easier to use than the other CI templating libraries.

Related posts:

  1. CodeIgniter: AJAX Pagination
  2. Using jQuery on a generic registration form

Tags: , , ,

0 comments: