CodeIgniter AJAX Pagination Example/Guideline

[ Update:  Download the example and source file from download page. ]

I wanted to put this example a long time ago ..  Here is a small example (thanks to xwero; i took his code from here  :D. I wanted to create a full application example but now i think it’s better to show this one. It’s not a tested code rather than a small guideline.

 

 

 

 

class Test extends Controller {

	function page($offset = 0)
	{
		ob_start();
		$this->ajax_page( 0 );
		$initial_content = ob_get_contents();
		ob_end_clean();	

		$data['table'] = "<div id='content'>" . $initial_content . "</div>" ;

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

	}

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

		$config['base_url'] = site_url('test/ajax_page/');
		/* Here i am indicating to the url from where the pagination links and the table section will be fetched */

		$config['div'] = '#content';
		/* CSS selector  for the AJAX content */

		$config['total_rows'] = $this->model->num_rows();
	    $config['per_page'] = 20;

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

	    $this->load->library('table');

	    $html =  $this->jquery_pagination->create_links() . br(1)
				.  $this->table->generate($this->model->content( $limit, $offset));

		echo $html;
	}
}

 

 

 

 

Note: Don’t forget to add the jquery.js in your view file, Jquery_pagination.php in your library folder.

Advertisements

29 thoughts on “CodeIgniter AJAX Pagination Example/Guideline

  1. mithil says:

    I cant understand how to use your code example. Please help how to setup.
    i have downloaded these files civalidate.rar,component_library.rar,Jquery_pagination_20081201.rar, jquery_pagination_example_20081201.rar, Rabbitform.rar, screencast.rar, i am beginner in CodeIgniter

  2. tohin says:

    as you are in beginner level start with my slide “Introduction to CodeIgniter” in my slideshare account. Later step by step you will understand how those examples work.

  3. tohin says:

    hmm.. actually this was just a guideline not a full functional code.. you can check the link i have added from where i took the code for showing this guideline.

    A hint:
    $this->model->num_rows() should sent total number of rows..
    and $this->model->content($limit, $offset) should sent a resultset ..

    I hope this helps

  4. Abdullah says:

    hello,
    I have been trying to get the next page button to work, but it doesnt seem to call the post command. after checking the source, this is what the button looks like

    >

    the first argument looks right, everything else looks good… ( i changed the # in href to javascript:;)

    what seems to be wrong? I use jquery heavily on my site, does having a $(document).ready(); function in my view has something to do with it?

  5. tohin says:

    ok.. did u checked the latest files in gihub ? . some little additions are included in pagination library . which includes showing info and even work as normal pagination if you want it to work it that way..

  6. Abdullah says:

    i did upgrade to the latest version, but still. the post function is just not being called.

    the onclick function appears to be

    $.post(‘http://localhost/~hameda/iskit/main/viewEntries/5’, {‘t’ : ‘t’}, function(data){ $(‘#content’).html(data);alert(‘it works !!’); }); return false;

    using firebug, i checked it never calls the post function

  7. Abdullah says:

    i am sorry, it seems that i am spamming your comments here. so i was checking the net tab in firebug. it seems that the post function is not finding localhost/~hameda/iskit/main/viewEntries/5 and is giving me a 404 error :/ when this the URL to my site (viewEntries being the function that populates the view in the controller)

    any ideas?

  8. amoc says:

    Hi tohin, i have implemented your example, but it doesnt works if i use Jquery POST method, example: i use this pagination for search result, if i click the link for page 2 or next it takes no action because it has search parameters, i thought when i click the link for page 2, it should post search parameters again.Please give me some clue…

  9. tohin says:

    Hello amoc, I got your point and yes in one of my project i used a solution. I wanted to upload that in my next version of pagination. But as i am too lazy for doing a screencast i failed in both case.
    Please wait another 6hours by that time i will upload the new code in github with direction.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s