Friday 17 April 2020

Create listing with handlebars js with ajax pagination in codeigniter

 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>
 




No comments:

Post a Comment

Thank You For Comment