implement-pagination-with-codeigniter

Implement pagination with codeigniter

Hello World, This is another tutorial of the series Learn Codeigniter from Scratch. In this tutorial, we will make our Todo Application fully dynamic and Implement pagination with codeigniter. In the last tutorial of this series, we have learned that how we can submit form and save data in database with codeigniter mysql. I have divided this tutorial in following parts:

  • Pagination Concept
  • Load and configure codeigniter pagination library.
  • Implement pagination
  • Test the concept.

Pagination Concept

When we have lot of data then we do not fetch our data at one time on the page because it will affect the server resources. We divide the data into parts, this concept is known as pagination. For example, we have 1000 row in database then we will set the limit 20 to fetch the data at one time on the page. This will make 50 links (1000/20) in pagination.


Load and configure codeigniter pagination library

Codeigniter provide us pagination library to work with it. In this tutorial, we will config and use this library with following steps:

  • Open Todo.php controller and add the following line after the form_validation library.
$this->load->library('pagination');
  • Create pagination.php file in application/config folder and add the following code.
<?php
	$config['full_tag_open'] = '<ul class="pagination">';
	$config['full_tag_close'] = '</ul>';
	$config['first_tag_open'] = '<li>';
	$config['first_tag_close'] = '</li>';
	$config['last_tag_open'] = '<li>';
	$config['last_tag_close'] = '</li>';
	$config['next_link'] = '&gt;';
	$config['next_tag_open'] = '<li>';
	$config['next_tag_close'] = '</li>';
	$config['prev_link'] = '&lt;';
	$config['prev_tag_open'] = '<li>';
	$config['prev_tag_close'] = '</li>';
	$config['num_tag_open'] = '<li>';
	$config['num_tag_close'] = '</li>';
	$config['cur_tag_open'] = '<li><a href="#">';
	$config['cur_tag_close'] = '</a></li>';
?>

In the above code, we have set the pagination configuration and styling. Above file will load automatically.

  • Modify the Todo controller with following index method.
function index($start=0){
		// Pagination Configuration Start
		$config['base_url'] = site_url('/todo/index');
		$config['total_rows'] = $this->Todo_model->count_list();
		$config['per_page'] = 5;
		$this->pagination->initialize($config);
		// Pagination Configuration End

		$data['page_title']="To-Do List";
		$data['totalResult']=$this->Todo_model->count_list();
		$data['content']=$this->Todo_model->get_all_list($start);
		$this->load->view('todo/todo.php',$data);
	}

You can replace the index method with above code.

  • We will also change the Todo model because we have to set the limit of data. Replace the following code with get_all_list method code.
// Get all list
	function get_all_list($start){
		$response=array();
		$this->db->limit('5',$start);
		$query=$this->db->get('todo_list');
		if($query->num_rows()>0){
			$response['bool']=true;
			$response['d']=$query->result_array();
		}else{
			$response['bool']=false;
		}
		return $response;
	}
  • Now its to implement the pagination in view file. Add the following code in todo.php in application/views/todo folder, after the table close tag.
<?php
			echo $this->pagination->create_links();
		?>

We have lots of things 🙂 Now its time to check our todo application.


Test the concept

  • Open the todo list app in browser and you will see the following screen in your browser.

 

pagination-screen

Congratulations, We have implemented pagination with codeigniter 🙂

In the next tutorial, we will fully test our application and Implement searching and sorting with codeigniter.

Leave a Reply

Your email address will not be published. Required fields are marked *