PHP Codeigniter 3 Ajax Pagination using Jquery Example

PHP Codeigniter 3 Ajax Pagination using Jquery Example

In this post we will give you information about PHP Codeigniter 3 Ajax Pagination using Jquery Example. Hear we will give you detail about PHP Codeigniter 3 Ajax Pagination using Jquery ExampleAnd how to use it also give you demo for it if it is necessary.

Are you looking for ajax pagination in codeigniter 3 app?, If yes then here i write step by step tutorial about php codeigniter ajax pagination from starch.

As we know, we love jquery and everyone wants to add jquery ajax code on his site. Because it saves time and ignores too much loading. without jquery ajax you have to load every time page, but if you use jquery ajax then it just loads data without loading the whole page.

So in this example, I created the “posts” table and then add some dummy records on it. Then display all the data using ajax pagination. You have to just follow a few steps and then you will get a full example like as below screenshot.

Preview:

Step 1: Create posts Table

In first table we must have one table with some dummy records. For this example i will create “posts” table and dummy records as like bellow query:

posts table

CREATE TABLE IF NOT EXISTS 'posts' (

'id' int(10) unsigned NOT NULL AUTO_INCREMENT,

'slug' varchar(255) COLLATE utf8_unicode_ci NOT NULL,

'title' varchar(255) COLLATE utf8_unicode_ci NOT NULL,

PRIMARY KEY ('id')

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=533 ;

Step 2: Make database configuration

in second step, we will add database details like username, password and database name. so you can do it from here.

application/config/database.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');


$active_group = 'default';

$query_builder = TRUE;


$db['default'] = array(

'dsn' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => 'root',

'database' => 'test',

'dbdriver' => 'mysqli',

'dbprefix' => '',

'pconnect' => FALSE,

'db_debug' => (ENVIRONMENT !== 'production'),

'cache_on' => FALSE,

'cachedir' => '',

'char_set' => 'utf8',

'dbcollat' => 'utf8_general_ci',

'swap_pre' => '',

'encrypt' => FALSE,

'compress' => FALSE,

'stricton' => FALSE,

'failover' => array(),

'save_queries' => TRUE

);

Also see:Codeigniter multiple drag and drop image upload example from scratch

Step 3: Create Post Controller

In this step, we will create Post Controller with index() and loadRecord(). index method will return view only, loadRecord() will get ajax data.

So, create new method on this controllers folder and put bellow code:

application/controllers/Post.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Post extends CI_Controller {

/**

* Get All Data from this method.

*

* @return Response

*/

public function __construct(){

parent::__construct();

$this->load->helper('url');

$this->load->library('pagination');

$this->load->database();

}

/**

* Get All Data from this method.

*

* @return Response

*/

public function index(){

$this->load->view('post_view');

}

/**

* Get All Data from this method.

*

* @return Response

*/

public function loadRecord($rowno=0){

$rowperpage = 5;

if($rowno != 0){

$rowno = ($rowno-1) * $rowperpage;

}

$allcount = $this->db->count_all('posts');

$this->db->limit($rowperpage, $rowno);

$users_record = $this->db->get('posts')->result_array();

$config['base_url'] = base_url().'post/loadRecord';

$config['use_page_numbers'] = TRUE;

$config['total_rows'] = $allcount;

$config['per_page'] = $rowperpage;

$config['full_tag_open'] = '<div ><nav><ul >';

$config['full_tag_close'] = '</ul></nav></div>';

$config['num_tag_open'] = '<li ><span >';

$config['num_tag_close'] = '</span></li>';

$config['cur_tag_open'] = '<li ><span >';

$config['cur_tag_close'] = '<span >(current)</span></span></li>';

$config['next_tag_open'] = '<li ><span >';

$config['next_tag_close'] = '<span aria-hidden="true"></span></span></li>';

$config['prev_tag_open'] = '<li ><span >';

$config['prev_tag_close'] = '</span></li>';

$config['first_tag_open'] = '<li ><span >';

$config['first_tag_close'] = '</span></li>';

$config['last_tag_open'] = '<li ><span >';

$config['last_tag_close'] = '</span></li>';

$this->pagination->initialize($config);

$data['pagination'] = $this->pagination->create_links();

$data['result'] = $users_record;

$data['row'] = $rowno;

echo json_encode($data);

}

}

Step 4: Create View File

In last step, we have to create view file, we will create new view file “post_view.php” on views folder and put bellow code on that file.

application/views/post_view.php

Also see:How to Delete Multiple Rows using Checkbox in Codeigniter 3?

<!DOCTYPE html>

<html lang="en">

<head>

<title>Codeigniter 3 Ajax Pagination using Jquery Example - ItSolutionStuff.com</title>

<meta charset="utf-8">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

<style type="text/css">

html, body { font-family: 'Raleway', sans-serif; }

a{ color: #007bff; font-weight: bold;}

</style>

</head>

<body>

<div >

<div >

<div >

Codeigniter Ajax Pagination Example - ItSolutionStuff.com

</div>

<div >

<!-- Posts List -->

<table id='postsList'>

<thead>

<tr>

<th>S.no</th>

<th>Title</th>

</tr>

</thead>

<tbody></tbody>

</table>

<!-- Paginate -->

<div id='pagination'></div>

</div>

</div>

</div>

<!-- Script -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type='text/javascript'>

$(document).ready(function(){

$('#pagination').on('click','a',function(e){

e.preventDefault();

var pageno = $(this).attr('data-ci-pagination-page');

loadPagination(pageno);

});

loadPagination(0);

function loadPagination(pagno){

$.ajax({

url: '/post/loadRecord/'+pagno,

type: 'get',

dataType: 'json',

success: function(response){

$('#pagination').html(response.pagination);

createTable(response.result,response.row);

}

});

}

function createTable(result,sno){

sno = Number(sno);

$('#postsList tbody').empty();

for(index in result){

var id = result[index].id;

var title = result[index].title;

var content = result[index].slug;

content = content.substr(0, 60) + " ...";

var link = result[index].slug;

sno+=1;

var tr = "<tr>";

tr += "<td>"+ sno +"</td>";

tr += "<td><a href='"+ link +"' target='_blank' >"+ title +"</a></td>";

tr += "</tr>";

$('#postsList tbody').append(tr);

}

}

});

</script>

</body>

</html>

Now it’s all done steps. You run and check it…

I hope it can help you…

Hope this code and post will helped you for implement PHP Codeigniter 3 Ajax Pagination using Jquery Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

85  +    =  90

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US