Pagination with AJAX problem

[eluser]Katsune[/eluser]
Hey guys,

I've been browsing the web for a while now and testing some tutorials for pagination with ajax. I'm using the default pagination procedure from the documentation, just pure CI style. Now, my problem is that most tutorial I see have different implementation of this. Can anyone give me a little help on how to make it work?

Here's my code block without any ajax code yet but is functional as a pagination:
https://gist.github.com/Katsune/9961473

The Akismet filter is flagging me as an spammer whenever I post my codeblock here.


Thanks,

[eluser]InsiteFX[/eluser]
Download my jQuery pagination here:

Fx_pagination.zip

Controller:

Code:

public function index($offset = '')
{
  $this->load->library('fx_pagination');
  $this->load->model('demo_model', 'demo');

  $data = array();

  $limit = 10;
  $count = $this->demo->count_all();

  /**
   * ----------------------------------------------------------------------
   * The base_url and segment below must be set to the right URL
   * and the segment must be set to the right segment or it WILL NOT WORK!
   * ----------------------------------------------------------------------
   */
  $config['base_url']       = base_url('home/index/');
  $config['uri_segment']    = 3;

  $config['full_tag_open']  = '<div id"content" class="text-center"><ul class="pagination pagination-sm page-manage">';
  $config['display_pages']  = TRUE;
  $config['per_page']       = $limit;
  $config['total_rows']     = $count;
        $config['num_links']      = 4;

  // Turns ON/OFF the Total page display in the DataGrid pagination links.
  $config['show_count']     = TRUE;

  // Get the database records with limit and offset.
  $query = $this->demo->get_with_limit($limit, $offset, 'id asc');

  $data["data_grid"] = $query->result();

  // Initialize the pagination configuration
  $this->fx_pagination->initialize($config);

  // Display the pagination links.
  $data['pager_links'] = $this->fx_pagination->create_links();

                // Rest of your code
}

View: .application/views/manage_view.php

Code:

<div class="panel panel-default manage">

<div class="panel-heading"> Manage Users</div>

<div class="panel-body manage">
  <div class="table-responsive">
   <table class="table table-bordered table-hover table-condensed manage">

    <thead class="active-header">
     <tr>
      <th class="th-align">#id</th>
      <th class="th-align">Download Date</th>
      <th class="th-align">Download Type</th>
      <th class="text-center">Actions</th>
     </tr>
    </thead>

    <tbody>
    &lt;!-- Generate the Twitter Bootstrap Table DataGrid --&gt;
    &lt;?php foreach ($data_grid as $item): ?&gt;
     <tr>
      <td>&lt;?php echo $item->id; ?&gt;</td>
      <td>&lt;?php echo $item->download_date; ?&gt;</td>
      <td>&lt;?php echo $item->download_type; ?&gt;</td>

      &lt;!-- Build actions links --&gt;
      <td class="text-center col-lg-2">
       <a href="&lt;?php echo base_url('pages/edit/'.$item-&gt;id.'/'); ?&gt;" class="btn btn-primary btn-info btn-xs">
        <span class="glyphicon glyphicon-edit"></span> Edit
       </a>
       <a href="&lt;?php echo base_url('pages/delete/'.$item-&gt;id.'/'); ?&gt;" class="btn btn-primary btn-danger btn-xs">
        <span class="glyphicon glyphicon-remove-circle"></span> Delete
       </a>
      </td>
     </tr>
    &lt;?php endforeach; ?&gt;
    </tbody>

   </table>

  </div> &lt;!-- table-responsive --&gt;
</div> &lt;!-- panel body --&gt;

<div class="panel-footer manage">
  &lt;?php echo $pager_links; ?&gt;
</div>

</div> &lt;!-- panel --&gt;

[eluser]Katsune[/eluser]
Thank you very much insiteFX, you make my weekend morning as good as it can be. I'll digest your code block and get back here as soon as possible.