Simple Example for Handlebar js with ajax pagination in codeigniter
Create test controller .php
class Test extends MY_Controller
{
function __construct()
{
parent::__construct();
$this->load->model('Test_model');
$this->load->library('pagination');
$this->load->helper('url');
}
public function list()
{
$this->db->select('member_id,first_name,last_name');
$result = $this->db->get('tbl_member', 10, 20);
//echo $this->db->last_query();
$data['data'] = $result->result_array();
echo json_encode($data);
}
public function memberlist()
{
$this->load->view('memberlist');
}
public function loadRecord($rowno=0)
{
// Row per page
$rowperpage = 5;
// Row position
if($rowno != 0){
$rowno = ($rowno-1) * $rowperpage;
}
//print_r($rowno);exit;
// All records count
$allcount = $this->Test_model->getrecordCount();
//print_r([$rowno,$rowperpage]);
// Get records
$users_record = $this->Test_model->getData($rowno,$rowperpage);
// echo "
";
// print_r($users_record);exit;
//echo $this->db->last_query();exit;
// Pagination Configuration
$config['base_url'] = base_url().'/test/loadRecord';
$config['use_page_numbers'] = TRUE;
$config['total_rows'] = $allcount;
$config['per_page'] = $rowperpage;
// Initialize
$this->pagination->initialize($config);
// Initialize $data Array
$data['pagination'] = $this->pagination->create_links();;
$data['result'] = $users_record;
$data['data'] = $rowno;
echo json_encode($data);
}
}
?>
after create test model .php
class Test_model extends CI_Model
{
public function __construct() {
parent::__construct();
}
// Fetch records
public function getData($rowno,$rowperpage) {
$this->db->select('*');
$this->db->from('tbl_member');
$this->db->limit($rowperpage, $rowno);
$query = $this->db->get();
return $query->result_array();
}
// Select total records
public function getrecordCount() {
$this->db->select('count(*) as allcount');
$this->db->from('tbl_member');
$query = $this->db->get();
$result = $query->result_array();
return $result[0]['allcount'];
}
}
after create view memberlist.php
<html>
<head> <title></title> <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> </head> <body> <script id="handlebars-demo" type="text/x-handlebars-template"> <table width="100%" style="border: 1px solid;"> <thead> <tr><th style="border: 1px solid;">Memnber id</th> <th style="border: 1px solid;">First Name</th> <th style="border: 1px solid;">Last Name</th></tr> </thead> <tbody> {{#result}} <tr> <td style="border: 1px solid;">{{member_id}}</td> <td style="border: 1px solid;">{{first_name}}</td> <td style="border: 1px solid;">{{last_name}}</td> </tr> {{/result}} </tbody> </table> <div style='margin-top: 10px;' id='pagination'>{{{pagination}}}</div> </script> <div id="test"></div> <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script> <script > loadPagination(0); function loadPagination(pagno){ $.ajax({ url: "http://graphql.local.com/test/loadRecord/"+pagno, type: 'get', dataType: 'json', success: function(response){ var template = $('#handlebars-demo').html(); var templateScript = Handlebars.compile(template); var html = templateScript(response); //console.log(html); // // Insert the HTML code into the page $("#test").html(html); } }); } $(document).on('click','#pagination a',function(e){ e.preventDefault(); var pageno = $(this).attr('data-ci-pagination-page'); //console.log(pageno); loadPagination(pageno); }); </script> </body> </html>
<head> <title></title> <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> </head> <body> <script id="handlebars-demo" type="text/x-handlebars-template"> <table width="100%" style="border: 1px solid;"> <thead> <tr><th style="border: 1px solid;">Memnber id</th> <th style="border: 1px solid;">First Name</th> <th style="border: 1px solid;">Last Name</th></tr> </thead> <tbody> {{#result}} <tr> <td style="border: 1px solid;">{{member_id}}</td> <td style="border: 1px solid;">{{first_name}}</td> <td style="border: 1px solid;">{{last_name}}</td> </tr> {{/result}} </tbody> </table> <div style='margin-top: 10px;' id='pagination'>{{{pagination}}}</div> </script> <div id="test"></div> <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script> <script > loadPagination(0); function loadPagination(pagno){ $.ajax({ url: "http://graphql.local.com/test/loadRecord/"+pagno, type: 'get', dataType: 'json', success: function(response){ var template = $('#handlebars-demo').html(); var templateScript = Handlebars.compile(template); var html = templateScript(response); //console.log(html); // // Insert the HTML code into the page $("#test").html(html); } }); } $(document).on('click','#pagination a',function(e){ e.preventDefault(); var pageno = $(this).attr('data-ci-pagination-page'); //console.log(pageno); loadPagination(pageno); }); </script> </body> </html>
