new Jquery pagination with CI?

[eluser]A.M.F[/eluser]
hello everyone

i want to use ajax pagination with CI, and i saw those files in here:
http://tohin.wordpress.com/2008/08/12/co...agination/

i tried to work with it, but i didn't get any result.
does anyone can help me how to use those files, or give me maybe an idea of how to make this jQuery pagination?

thank u!

[eluser]xwero[/eluser]
The simplest way to create ajax pagination is to make a controller method that gets the data that needs to be displayed and a view where the data is shown. in the view where the data is shown there are also all the links to the pages. And then it's simply a matter of displaying the first data when the page is shown for the first time and by clicking on the links the other data parts are retrieved.

If you are smart you make the links to work in php and manipulate the link in javascript to only retrieve the data. For example you can prefix the last non numeric segment with ajax_ to retrieve the data so you can have show/20 which load the page in rows beginning with the 20th and ajax_show/20 gets you only the data. For this you need a model method that gets the data parts and two controller methods.

[eluser]A.M.F[/eluser]
[quote author="xwero" date="1223324980"]The simplest way to create ajax pagination is to make a controller method that gets the data that needs to be displayed and a view where the data is shown. in the view where the data is shown there are also all the links to the pages. And then it's simply a matter of displaying the first data when the page is shown for the first time and by clicking on the links the other data parts are retrieved.

If you are smart you make the links to work in php and manipulate the link in javascript to only retrieve the data. For example you can prefix the last non numeric segment with ajax_ to retrieve the data so you can have show/20 which load the page in rows beginning with the 20th and ajax_show/20 gets you only the data. For this you need a model method that gets the data parts and two controller methods.[/quote]

i think i am too newbie to ajax and jquery cuz i didn't understand anything of what u said... =[

i am now trying to modify some jQuery codes to get the picture of it, but it's hardddd

[eluser]xwero[/eluser]
Ok here is the basic code. I'm not 100% sure it works but you can debug if you want

Code:

// controller
function page($offset = 0)
{
      $this->load->model('model');
      $this->load->library('pagination');

      $config['base_url'] = 'http://example.com/index.php/test/page/';
      $config['total_rows'] = $this->model->num_rows();
      $limit = 20;
      $config['per_page'] = $limit;
      $config['num_links'] = 10000; // ridiculous high number to show all the links
      $config['full_tag_open'] = '<p id="pagination">';
      $config['full_tag_close'] = '</p>';

      $this->pagination->initialize($config);

      $data['pagination'] $this->pagination->create_links();
      
      $this->load->library('table');
      
      $data['table'] = $this->table->generate($this->model->content($limit,$offset));

      $this->load->view('page',$data);
}

function ajax_page($offset = 0)
{
   $this->load->library('table');
   $this->load->model('model');
   $limit = 20;

   echo $this->table->generate($this->model->content($limit,$offset));
}
// javascript
$(function(){
  // change page to ajax_page in pagination urls
  $('#pagination a').each(function(){
    var href = $(this).attr('href');
    href = href.replace(/page/,'ajax_page');
    $(this).attr('href',href);
  });
  // ajax request
  $('#pagination a').click(function(){
    $.ajax({
       type: "GET",
       url: $(this).attr('href'),
       success: function(table){
          $('table').remove(); // remove content
          $('#pagination').after(table); // add content
       }
    });

    return false; // don't let the link reload the page
  });
});
// view : page.php
&lt;?php echo $pagination.$content ?&gt;

[eluser]Amzad Hossain[/eluser]
@A.M.F Sorry i have not seen this post until i saw a referrer in my blog .

http://tohin.wordpress.com/2008/10/07/co...guideline/

Here is a small example/guideline i have created modifying the code of xwero. Hope this comes helpful.

@xwero... thanks for your example.

[eluser]Unknown[/eluser]
I am trying to implement that in a bigger website.. what i want to do is to display the data in a specific div and i already know that should be changed in the Jquery_pagination file., what confuses me is the code and styling for the view, where to say that this will change the slide as well as where to specify how to display each one of the items fetched?
Thanks a lot for any help - much appreciated

[eluser]Amzad Hossain[/eluser]
Do u want to change the styling of pagination links ??

[eluser]michaelfbradley[/eluser]
This is probably the best screencast covering CodeIgniter & AJAX Paging with jQuery

Weblee.co.uk - CodeIgniter AJAX Paging

[eluser]dinhtrung[/eluser]
You should try the jQuery Pagination plugins : http://tympanus.net/codrops/2009/11/17/j...on-plugin/
In my implementation, I used both jQuery Pagination and CI Pagination class. I've got 2 methods in my controller to do so. The code should be something like below:
[code]
/* Your controller */
public function page()
{
$this->load->library('pagination');
$data['rows'] = $this->db->limit($this->pagination->per_page, $this->uri->uri_segment(3, 0))
->get('dbtable')
->result_array();
if (count($data['rows'])) {
$data['jpaginate'] = "<div id='paginate-me'></div>";
$data['cipaginate'] = $this->pagination->create_links();
}
$this->load->view('table', $data);
}

public function page_view()
{
$data['rows'] = $this->db->limit($this->pagination->per_page, $this->uri->uri_segment(3, 0))
->get('dbtable')->result_array();
$this->load->view('table', $data);
}

/** Your view **/
&lt;?php
if (! empty($jpaginate)) echo $jpaginate));
echo "<div id='table'>";
if (! empty($cipagination)) echo "<noscript>".$cipagination."</noscript>";
echo "<table>";
echo "<thead>";
/** Your header goes here **/
echo "</thead><tbody>";
foreach ($rows as $r) {
echo "<tr>";
/** Your fields goes here **/
echo "</tr>";
}
echo "</tbody></table>";
echo "</div>";
} ?&gt;
[removed]
$("#jpaginate-me").paginate(
{
count: &lt;?php echo $this->pagination->num_pages ; ?&gt;,
start: &lt;?php echo $this->pagination->cur_page; ?&gt;,
display: &lt;?php echo $this->pagination->num_links * 2 + 1; ?&gt;,
onChange: function(page){
$.post("&lt;?php echo site_url($this->base_url.'page_view'); ?&gt;" + '/' + (page - 1) * &lt;?php echo $this->pagination->per_page; ?&gt;,
function(response){
$("#table").html(response);
}
);
},
}
);
[removed]

To sum up, you create 2 methods, one generate full HTML data and javascript contents and the second only generate the table you want to appears during pagination click.
Then embbed the CI pagination library into <noscript> tags, to display it along the table.
Then finish with jQuery Paginate plugin. That's all.

[eluser]nhantam[/eluser]
I create file from guide about, but my code not work.
Could you help me edit paging jquery
Please download source here and edit help me ?
import database blogs.sql.zip and run url: http://localhost/codeigniter_172/blogjquery/page

controllers/blogjquery.php

Code:

public function Blogjquery()
    {
        parent::Controller();
        $this->load->database();
        $this->load->helper(array('html','language'));            
         $this->load->library('table');
            $this->load->library('ajax');
        $this->load->library('Jquery_pagination');        
    }

public function page()
    {
        
        $this->load->model('blogmodel');          
          
          $current_page = $this->uri->segment(3,0);
          $per_page = 2;
          $total_page = $this->blogmodel->getListNumrow();        
          $this->jquery_pagination->cur_page = $current_page;
          $this->jquery_pagination->per_page = $per_page;
        $this->jquery_pagination->num_pages = $total_page;
        
        $data['rows'] = $this->db->limit($this->jquery_pagination->per_page, $this->uri->segment(3, 0))
                    ->get('blogs')
                    ->result_array();
        
        $config['first_link'] = 'First';
        $config['div'] = 'table'; //Div tag id
        $config['base_url'] = ''; //'codeigniter_172/blogjquery/page/';
        $config['total_rows'] = $total_page;
        $config['per_page'] = $per_page;
        //$config['postVar'] = 'page';
        
        $this->jquery_pagination->initialize($config);
        
        if (count($data['rows'])) {
          $data['jpaginate'] = '<div id="paginate-me"></div>';
          $data['cipaginate'] = $this->jquery_pagination->create_links();
        }
        $this->load->view('blogj', $data);
      
    }
    
    public function page_view()
    {
        $this->load->model('blogmodel');
                    
        /*    
        $data['rows'] = $this->db->limit($this->pagination->per_page, $this->uri->uri_segment(3, 0))
                    ->get('blogs')->result_array();
        */
        
        $limit = 5;
        $offset = $this->uri->segment(3,0);
        
        $data['rows'] = $this->blogmodel->getList($offset, $limit);                
        $this->load->view('blogj', $data);
    }

views/blogj.php

Code:

src="http://localhost/codeigniter_172/js_jquery/jquery-1.3.2.js"
src="http://localhost/codeigniter_172/js_jquery/jquery.paginate.js"
    
    <div>
    &lt;?php                
        if (! empty($jpaginate)) echo $jpaginate;
        
            echo '<div id="table">';
            if (! empty($cipaginate)) echo $cipaginate;
            echo '<table>';
            echo '<thead>';
            /** Your header goes here **/
            echo '</thead><tbody>';
            foreach ($rows as $r) {
                echo '<tr>';
                /** Your fields goes here **/
                echo '<td>'.$r['id'].'</td>';
                echo '<td>'.$r['title'].'</td>';
                echo '</tr>';
            }
            echo '</tbody></table>';
            echo '</div>';
        
    ?&gt;
    </div>
        
    [removed]
    
    
        $('#jpaginate-me').paginate(
        {
            count: &lt;?php echo $this->jquery_pagination->num_pages;?&gt;,
            start: &lt;?php echo $this->jquery_pagination->cur_page;?&gt;,
            display: &lt;?php echo $this->jquery_pagination->num_links * 2 + 1; ?&gt;,
            onChange: function(page){
            $.post("http://localhost/codeigniter_172/blogiquery/page_view/" + (page - 1) * &lt;?php echo $this->jquery_pagination->per_page; ?&gt;,
                function(response){
                    $('#table').html(response);
                }
            );    
            },
        }
        );
    
    [removed]