Tutorial – Ajax Pagination in CodeIgniter Framework

646

CodeIgniter have the pagination library by default. But many times we are needed to implement the ajax based pagination in CodeIgniter. Because ajax pagination provides better user experience. Today we will discuss how to create ajax pagination in CodeIgniter framework.

We’ll modify the CodeIgniter’s Pagination library for integrating ajax pagination in CodeIgniter application. Also, this modified Ajax Pagination library provides many customization options for you, some options are given below.

  • Display loading image while data loading.
  • Add a custom function to pagination links.
  • Set a selector to load the pagination data.
  • and many more

For better understanding, we’ll build an example script. In the example code, data will be fetched from the database table and display in the view page with pagination links. Once the pagination link is clicked, more data would be fetched from the database and display instead of previously displayed data. Also, a loader image would appear at the time of data loading.

Database Table Creation

Create a table (posts) in the database (codeigniter_db). The following SQL will create a posts table in the database with some basic fields.

Pagination Library

The pagination library helps to generate pagination links and jQuery & Ajax code. This library makes ajax pagination simple for you. You only need to set configuration options and call the create_links() function. We’ve copied the CodeIgniter’s system pagination library, renamed the class to Ajax_pagination, modified and added code for extending Pagination library with Ajax Pagination functionality. Create a file called Ajax_pagination.php, copy & paste the below code and insert this file into the application/libraries folder.

Controller (Posts.php)

The Posts controller consists of 3 functions __construct(), index(), and ajaxPaginationData().
__construct() function loads the Post model, Ajax_pagination library and sets the per page data limit into $this->perPage variable.
In index() function, pagination library is initiated with basic configuration, index view is loaded and posts data is passed to the view.
The functionality of ajaxPaginationData() function is same like the index() function. But this method is requested by the ajax when pagination link is clicked.

Model (Post.php)

The Post model contains getRows() function. The getRows() function fetch data from the database and returns the post based on the limit restriction provided by the $params array.

View (posts/)

The view folder (posts/) contains 2 files, index.php and ajax-pagination-data.php.

index.php
In index.php file, the posts are listed with the pagination links when the Post controller loaded. Ajax pagination uses jQuery, so jQuery library (jquery.min.js) should need to be included. You can see only create_links() function is needed to call ($this->ajax_pagination->create_links()) from Pagination library to display the pagination links.
Div with loading class is used to display a loader while data loading. If you wish to change the selector, set the loading selector with the pagination configuration options.

ajax-pagination-data.php
This file does the same work like the index.php, but it contains minimal code to display only the posts list and pagination links.

 

Leave A Reply

Your email address will not be published.