Create Ajax Pagination in CodeIgniter - Step by step procedure

In my previous article, I have explained about how to install and configure the Codeigniter on your localhost. In this article, I'm going to describe How to create a Ajax pagination in Codeigniter. Codeigniter has many buil-in classes and plugins. Codeigniter pagination is easy to use.

Step 1: 

Download the Pagination classes from the Codeigniter site.

Click Here to download the Codeigniter Ajax pagination library files.

Step 2: 

Put the Ajax pagination library files to the "system/libraries" folder.

Step 3: 

Also download the prototype.js file and place anywhere on your root.

Step 4: 

Create a database table to store and retrieve the records to apply the pagination.

CREATE TABLE `my_best_friends` (
  `f_id` int(11) NOT NULL auto_increment,
  `f_name` varchar(100) NOT NULL,
  `f_phone` int(11) NOT NULL,
  `f_email` int(11) NOT NULL,
  `f_address` int(11) NOT NULL,
  PRIMARY KEY  (`f_id`)
)

Step 5:

Add the below code in your "Controller" file

class Paging extends Controller {
  function Paging(){
  parent::Controller();
$this->load->helper(array('form','url'));
$this->load->helper('text');
$this->load->library('Ajax_pagination');
}
  function index()
{
redirect ('paging/my_friends');
}
  function my_friends()
{
$pdata['TotalRec'] = $this->FriendsModel->TotalRec();
$pdata['perPage'] = $this->perPage();
$pdata['ajax_function'] = 'get_friends_ajax';
  $subdata['paging'] = $this->parser->parse('paging', $pdata, 
TRUE);
$subdata['all_friends'] = $this->FriendsModel->my_friends
($this->perPage());
  $data['body_content'] = $this->parser->parse('friend_list', 
$subdata, TRUE);
  $this->load->view('main',$data);
}
  function get_friends_ajax()
{
             $pdata['TotalRec'] = $this->FriendsModel->TotalRec();
             $pdata['perPage']  = $this->perPage();
      $pdata['ajax_function'] =  'get_friends_ajax';
      $data['paging'] =  $this->parser->parse('paging', $pdata, TRUE);
    $data['all_friends'] = $this->FriendsModel->my_friends($this->perPage());
      $this->load->view('friend_list',$data);
}
  function PerPage()
{
return 5;
}
 }

Step 6:

Add the below code in your "Model" file

class FriendsModel extends Model
{
    function FriendsModel()
    {
parent::Model();
}
  function TotalRec()
{
 $sql = "SELECT * FROM my_friends";
          $q = $this->db->query($sql);
          return $q->num_rows();
       }
  function my_friends($perPage)
{
$offset = $this->getOffset()
$query ="SELECT * FROM  my_friends Order By f_id Desc LIMIT ".$offset.", ".$perPage;
$q = $this->db->query($query);
return $q->result();
}
  function getOffset()
{
        $page = $this->input->post('page');
        if(!$page):
        $offset = 0;
        else:
        $offset = $page;
        endif;
        return $offset;
    }
}

Step 7:

Add the below code in your "paging.php" file in "application/views/" folder.

$config['first_link'] = 'First';
$config['div'] = 'container'; //Div tag id
$config['base_url'] = base_url().'paging/'.$ajax_function;
$config['total_rows'] = $TotalRec;
$config['per_page'] = $PerPage;
$config['postVar'] = 'page';

$this->ajax_pagination->initialize($config);
echo $this->ajax_pagination->create_links();

Step 8:

Add the below code in your "friend_list.php" file in "application/views/" folder.

<table border="1" width="200">
<tbody>
<tr>
<td>Friend Name</td>
<td>Friend Phone</td>
<td>Friend Address</td>
</tr>
foreach($all_friends as $row)
 {
<tr>
<td>echo $row->f_name</td>
<td>echo $row->f_phone</td>
<td>echo $row->f_address</td>
</tr>
}</tbody>
</table>

Step 9:

In main home page.,

Add the below code to your "main.php" file in "application/views/" folder. This file

contains your html code and all css and js files.

<div id="container">
     echo @$body_content;
</div>

Click Here to learn more about How to Install and configure codeigniter on your localhost.