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);
$("#test").html(html);
}
});
}
$(document).on('click','#pagination a',function(e){
e.preventDefault();
var pageno = $(this).attr('data-ci-pagination-page');
loadPagination(pageno);
});
</script>
</body>
</html>
