How To Operate Codeigniter Pagination Library Together Alongside Jquery Together With Ajax Alongside Consummate Sourcecode?
I accept used Codeigniter's pagination library together amongst twitter bootstrap(for styling pagination), Handlebars script(to arrive at html template) in addition to jQuery(to arrive at dynamic pagination via ajax).
It volition live really tardily to empathize the next code if you lot are expert at Codeigniter, twitter bootstrap, jQuery in addition to Handlebars script.
Handelbars:Handlebars provides the ability necessary to allow you lot build semantic templates effectively amongst no frustration. Click here to read to a greater extent than virtually what is Handelbars in addition to how it works?
This is working trial which I accept used inwards i of my project. If you lot notice whatsoever bug, allow me know. Or whatsoever feedback volition live appreciated. I accept included Model, View, Controller in addition to jQuery. Hope individual volition relieve a lot of time. You tin extend the script the agency you lot want. :)
Controller
View
 |
| Customized Bootstrap pagination vogue for Codeigniter pagination library |
It volition live really tardily to empathize the next code if you lot are expert at Codeigniter, twitter bootstrap, jQuery in addition to Handlebars script.
Handelbars:Handlebars provides the ability necessary to allow you lot build semantic templates effectively amongst no frustration. Click here to read to a greater extent than virtually what is Handelbars in addition to how it works?
This is working trial which I accept used inwards i of my project. If you lot notice whatsoever bug, allow me know. Or whatsoever feedback volition live appreciated. I accept included Model, View, Controller in addition to jQuery. Hope individual volition relieve a lot of time. You tin extend the script the agency you lot want. :)
Controller
<?php if ( ! defined('BASEPATH')) exit('No at nowadays script access allowed'); aeroplane Home extends CI_Controller { business office __construct() { parent::__construct(); } business office index() { //load the model $this->load->model('your_model'); $this->load->library('pagination'); $config = array(); $config["base_url"] = base_url() . "home/index/"; $config["total_rows"] = $this->your_model->record_count(); $config["per_page"] = 10; //pagination customization using bootstrap styles $config['full_tag_open'] = '<div class="pagination pagination-centered"><ul class="page_test">'; // I added aeroplane cite 'page_test' to used after for jQuery $config['full_tag_close'] = '</ul></div><!--pagination-->'; $config['first_link'] = '« First'; $config['first_tag_open'] = '<li class="prev page">'; $config['first_tag_close'] = '</li>'; $config['last_link'] = 'Last »'; $config['last_tag_open'] = '<li class="next page">'; $config['last_tag_close'] = '</li>'; $config['next_link'] = 'Next →'; $config['next_tag_open'] = '<li class="next page">'; $config['next_tag_close'] = '</li>'; $config['prev_link'] = '← Previous'; $config['prev_tag_open'] = '<li class="prev page">'; $config['prev_tag_close'] = '</li>'; $config['cur_tag_open'] = '<li class="active"><a href="">'; $config['cur_tag_close'] = '</a></li>'; $config['num_tag_open'] = '<li class="page">'; $config['num_tag_close'] = '</li>'; $this->pagination->initialize($config); $page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0; $data['page'] = $page; $data["results"] = $this->your_model->fetch_record($config["per_page"], $page); //check if ajax is called if($this->input->post('ajax', FALSE)) { echo json_encode(array( 'results' => $data["results"], 'pagination' => $this->pagination->create_links() )); } //load the stance $this->load->view('template', $data); } } Model <?php if ( ! defined('BASEPATH')) exit('No at nowadays script access allowed'); aeroplane your_model extends CI_Model { //set tabular array cite to live used past times all functions var $table = 'tbl_tablename'; business office fetch_record($limit, $start) { $this->db->limit($limit, $start); $query = $this->db->get($this->table); render ($query->num_rows() > 0) ? $query->result() : FALSE; } business office record_count() { render $this->db->count_all($this->table); } } View
<html> <head> <title>Codeigniter in addition to dynamic pagination amongst jQuery in addition to Ajax</title> <!-- Le styles --> <link href="<?php echo base_url('assets/css/bootstrap.css');?>" rel="stylesheet"> </head> <body> <div id="result_table"> <script id="result_template" type="text/x-handlebars-template"> <table class="table table-striped table-bordered"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <!-- mustache templates --> {{! exclusively output if final result exists }} {{#if results}} {{#each results}} <tr> <td>{{name}}</td> <td>{{age}}</td> <td>{{gender}}</td> </tr> {{/each}} {{else}} <tr><td colspan="3">No records found!</tr></td> {{/if}} </tbody> </table> </script> </div> <div id="pagination"></div> <!-- Le javascript ================================================== --> <!-- Placed at the terminate of the document in addition to thus the pages charge faster --> <script src="<?php echo base_url('assets/js/jquery.js') ?>"></script> <script> var base_url = "<?php echo base_url(); ?>"; </script> <script src="<?php echo base_url('assets/js/bootstrap.js') ?>"></script> <script src="<?php echo base_url('assets/js/handlebars.js') ?>"></script> <script src="<?php echo base_url('assets/js/custom.js') ?>"></script> </html> jQuery $(document).ready(function() { var root = $("#result_table").html(); if (source) { var result_template = Handlebars.compile(source); business office load_result(index) { index = index || 0; $.post(base_url + "home/index/" + index, { ajax: truthful }, function(data) { $("#result_table").html(result_template({results: data.results})); // pagination $('#pagination').html(data.pagination); }, "json"); } //calling the business office load_result(); } //pagination update $('#pagination').on('click', '.page_test a', function(e) { e.preventDefault(); //grab the final paramter from url var link = $(this).attr("href").split(/\//g).pop(); load_result(link); render false; }); }); Sumber http://developer-paradize.blogspot.com
Comments
Post a Comment