How to Ajax Pagination with Search and Filter in CodeIgniter Example

793

In this CodeIgniter tutorial, we’ll extend the Ajax pagination functionality with search and filter. Search and filtering features are commonly used in every data list. Here we’ll show you how to implement live search and filter on the list with Ajax Pagination in CodeIgniter. In our example script, we will fetch the posts data from the database and display in the list. Also, Ajax pagination with search and filter functionality will be added to the post list.

Database Table Creation

In this example script, we’ll fetch the posts data from the database. The following SQL creates a posts table with some basic fields.

Ajax Pagination Library

The Ajax_pagination library helps to generate pagination links and get the data without page refresh using jQuery and Ajax. This library (Ajax_pagination.php) need to be placed into the application/libraries/ directory.

Controller (Posts.php)

The Posts controller contains of 3 functions __construct(), index(), and ajaxPaginationData().
__construct() – Post model and Ajax_pagination library is loaded in this function. Also, the per page data limit is set into $this->perPage variable.
index() – The posts data is fetched using Post model and passes to the view. The pagination library is configured and initiated to display the pagination links.
ajaxPaginationData() – Like the index() function ajaxPaginationData() doing the same. But this method is loaded via Ajax by clicking the pagination links.

If you notice on pagination configuration, a function (searchFilter) is specified in link_func. This user defined function will be called on each pagination link, that helps to pass the search and filter request.

Model (Post.php)

The Post model is used to fetch the posts data from the database and returns data based on the conditions passed by $params array.

View (posts/)

Two view files is used, index.php and ajax-pagination-data.php.
index.php:
The jQuery is used for Ajax pagination and search, so jQuery library need to be loaded first.

On pagination links click searchFilter() JavaScript function is loaded. This function gets the values from search field and filter drop-down and sends to ajaxPaginationData() of Posts controller via Ajax. Once the response is received, the respective posts data is displayed in the post list.

On Post controller load, some specified number of posts is listed with search input and filter dropdown. To display the pagination link, create_links() function is used from Pagination library ($this->ajax_pagination->create_links()). The loading div is used to display loader image on post loading.

ajax-pagination-data.php:
When pagination links are clicked, this view is loaded and it displays only the posts data with pagination links.

 

Leave A Reply

Your email address will not be published.