Simple Ajax Pagination With JQuery and Codeigniter

November 22nd, 2011 by aditia rahman / 13 Comments  

     

Codeigniter pagination class is really useful for me, it help to cut the repetitive task when we are creating pagination with large data, today I want to share a little of my thought, using codeigniter pagination class with ajax jquery. Here I show with a simple codeigniter code.  This post only show the code example, cause i don’t think it necessary to provide a downloadable code.

codeigniter ajax pagination jquery

Controller

Here are the controller, to make it easier the data in this example using a static array variable, so it very easy for us to get the data by the array index, and we need to load the url helper and of course the pagination library.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class User extends CI_Controller {

  public function index($start = 0) {
    $data_paging = array('John 1', 'John 2', 'John 3', 'John 4',
      'John 5', 'John 6', 'John 7', 'John 8', 'John 9', 'John 10',
      'John 11', 'John 12', 'John 13', 'John 14', 'John 15', 'John 16',
      'John 17', 'John 18', 'John 19', 'John 20', 'John 21', 'John 22',
      'John 23', 'John 24', 'John 25', 'John 26', 'John 27', 'John 28',
      'John 29', 'John 30', 'John 31', 'John 32', 'John 33', 'John 34',
      'John 35', 'John 36', 'John 37', 'John 38', 'John 39', 'John 40',
      'John 41', 'John 42', 'John 43', 'John 44', 'John 45', 'John 46',
      'John 47', 'John 48', 'John 49', 'John 50', 'John 51', 'John 52',
      'John 53', 'John 54');

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

    $config['base_url']   = site_url('user/index');
    $config['total_rows'] = count($data_paging);
    $config['per_page']   = 5;

    $data['user'] = array();

    for ($i=$start; $i<$start+$config['per_page']; $i++) {
      if (isset($data_paging[$i])) {
        $data['user']['name'][] = $data_paging[$i];
      }
    }

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

    if ($this->input->post('ajax')) {
      $this->load->view('user/ajax_index', $data);
    } else {
      $this->load->view('user/index', $data);
    }
  }
}

?>
View

The jquery code I added on the top of the page, and these are where the idea lies, put the pagination content on some div element with unique id, and with jquery you can applied the click function on each pagination link. The content that will be updated is div#content you can add a loading message by your self, the ajax content will update not only the data but the pagination too.

<!DOCTYPE html>
<html>
<header>
  <title>CodeIgniter Ajax Jquery Pagination</title>
  <script src="<?php echo base_url(); ?>assets/js/jquery-1.6.4.min.js"></script>
  <script>
  $(function() {
    applyPagination();

    function applyPagination() {
      $("#ajax_paging a").click(function() {
        var url = $(this).attr("href");
        $.ajax({
          type: "POST",
          data: "ajax=1",
          url: url,
          beforeSend: function() {
            $("#content").html("");
          },
          success: function(msg) {
            $("#content").html(msg);
            applyPagination();
          }
        });
        return false;
      });
    }
  });
  </script>
</header>
<body>
<div id="content">
  <div id="data">
    <?php foreach($user['name'] as $u): ?>
        <div><?php echo $u; ?></div>
    <?php endforeach; ?>
  </data>

  <div id="ajax_paging">
    <?php echo $pagination; ?>
  </div>
</div>
</body>
</html>
Ajax View
<div id="data">
  <?php foreach($user['name'] as $u): ?>
      <div><?php echo $u; ?></div>
  <?php endforeach; ?>
</data>

<div id="ajax_paging">
  <?php echo $pagination; ?>
</div>
        submit to reddit Delicious

13 Comments Leave a Comment Subscribe RSS

Leave a Comment