Codeigniter: AJAX Pagination

[ Update: ย Download the example and source file from download page. Pagination Example Post ]

Few days ago, I was looking for an AJAX pagination for codeigniter. Then i saw this AJAX pagniation by Gin2. He used Prototype. In my case i wanted to use JQuery. I saw his approach and wanted to make it work for my project and after a quick typo the pagination library is done.

Though the use is same as the built in pagination system except another extra config parameter :

$config[‘div’] = ‘#content’; /* Here #content is the CSS selector for target DIV */

Requirements: Make sure you have added the Jquery.js file on top of the view file. Download latest Jquery from here. Put “Jquery_pagination.php” file in you application/library folder and use it as a separate library.

Check here : www.github.com/neotohin

I will try to add an example and a little tutorial very soon. Be in touch… ๐Ÿ˜€

Modification:

To add extra javascript code after clicking the links or do other binding add the extra javascript code in

$config[‘js_rebind’] = “alert(‘it works !!’); “;

Check here :ย www.github.com/neotohin

Advertisements

68 thoughts on “Codeigniter: AJAX Pagination

  1. s9 says:

    I’m having trouble with re-binding other event handlers within the #targetDiv. I have a function which does the rebinding, where should I put it?

  2. tohin says:

    when i wrote this ajax pagination .. i wanted a quick solution for my work. That’s why i did not put any options for such kind. Hopefully i will add this soon.

  3. neryo says:

    there is a small error in Render the “previous” link

    $this->getAJAXlink( $i, $prev_link )

    to

    $this->getAJAXlink( $i, $this->prev_link )

  4. tohin says:

    I am not sure.. how i missed that.. it means i have to be more careful from now on. Thanks man..

    Note: i have changed the code and updated the download links ..
    Again Thanks.

  5. Rick says:

    Hey Im using your jquery version. But im running into a problem here
    I have have a view that loads a main template css js etc.. when i use
    the jquery pagination it returns the whole page template and all
    inside the innerHTML div block How do i just retun the data not the whole
    page in CI?

    Thanks
    Rick

  6. Rick says:

    Hey I’m using your JQuery Page Lib for CI.. Nice Job i must say
    but I’m having a problem and hope you could help. Basicly
    I have a.click function that is embeded within the data that
    pageinates. the a.click function works on the first paginated page
    with no issues but if i were to click the second page when the
    data loads.. the a.click function does not work no more.. it
    kind of looks like the returned ajax table with the embeded
    a.click function does not see the jQuery is loaded. Did you ever
    have this type of problem?

    Thanks For Your Help
    Rick

  7. tohin says:

    $config[‘js_bind’] actually solves your problem.

    i think your click event is called in ready function of JQuery. copy that part of code and put that in $config[‘js_bind’].

  8. Rick says:

    Hey Thanks for getting back to me Here is the output from the
    js_bind within the jQuery Link

    »

    IM trying to have the #remote click function be read on the second page but
    it doesnt want to work. The remote function Just opens a div with the location
    contents of the href.. It works on the First page but as soon as i click the second page its like the inner content does not see jquery. I even tried putting jquery in the href location with no luck.. Maybee the function is too
    heavy inside the onclick statment?

    Oriniginally i have this function in the document.ready of an external js file
    and the .click is binded to a href with id remote.. This works well
    but it has somthing to do with the contxt being returned in the ajax call
    that stops this binding. Do you have any thoughts? Your Help appreciated.

    Rick

  9. Rick says:

    Sorry about that last one..

    <a class="pagination" href="#" onclick=’loading_post("https://paypeopleonline.com/payments/ajax_page/10&quot;,"#contentAjax","");
    $("#remote").click(function () {
    var loadingDiv = $("#loading");
    loadingDiv.show();
    $("#other").fadeIn();
    var location = $(this).attr("href");
    $("#other").animate({opacity: 1}, 300);
    $("#other").load(location,"",function(){
    loadingDiv.fadeOut("fast");
    })});return false;’>&raquo;</a>

  10. tohin says:

    please take this issue to private message communication in codeIgniter forum. I need more information regarding your problem. send me a private message in codeIgniter.

  11. kailash says:

    Hey, great work, i needed this one!
    however, I found a little bug in the js_rebind mechanism.

    The function specified in js_rebind is executed before completion of the ajax request and the binding happens before the requested content is loaded in the page, so loaded content doesn’t get bound.

    I solved this by slightly changing the getAJAXlink method, the rebind function is now called in the ajax callback:

    function getAJAXlink( $count, $text) {
    return “base_url . $count .”‘, {‘t’ : ‘t’}, function(data){
    $(‘”. $this->div . “‘).attr(‘innerHTML’,data);
    ” . $this->js_rebind .”;
    });
    return false;\”>”
    . $text .’
    ‘;
    }

  12. Kir says:

    A PHP Error was encountered
    Severity: Notice
    Message: Undefined variable: prev_link
    Filename: libraries/Jquery_pagination.php
    Line Number: 180
    . $this->getAJAXlink($i,$prev_link)
    fix
    . $this->getAJAXlink($i,$this->prev_link)

  13. Nikola says:

    I’m having some problems with UI Dialog and Tabs here. If I don’t ‘rebind’ the Dialogs / Tabs I obviously don’t Dialogs or Tabs but when I do I get a new instance of them each time I ‘tab’ to the next AJAX page. I’m not clear on why or how this could happen. Any ideas?

  14. Nikola says:

    Also, in profiling this page I’ve just noticed the profiler output is being loaded multiple times as well…

  15. abada says:

    nice job tohin

    iam usin ur JQuery Page Lib but olz
    how can i send a parameter

    such as $config[‘js_rebind’] = “‘&userpage=’+$(‘#user_id’).val()”;

    to request it ?

    plz help

  16. tohin says:

    you want to send an extra parameter during ajax call right ?? rebind’s purpose is different .. to achieve your goal:

    send an extra value in config:
    $config['extra_param'] = 'your_code';

    in library :

    add a variable in class :

    var $extra_param = '';

    and in function: getAJAXlink()

    $.post('". $this->base_url . $count ."' " . $this-> extra_param ."

    I hope this solves your problem ๐Ÿ™‚ ..

  17. abada says:

    hey tohin

    iam trying to change {‘t’ :’t’}

    to {‘t’ : $(‘#user_id’).val()}

    and it work !

    thanks man ๐Ÿ˜€

  18. abada says:

    it work if i use {โ€™tโ€™ : $(โ€™#user_idโ€™).val()}

    but if i use {โ€™tโ€™ : “.$_REQUEST[“userid”].”}

    it doesn`t work ..

    because $_REQUEST[“userid”] is empty in second time

  19. tohin says:

    you can put the $_REQUEST [‘userid’] transferred into flashdata or session. this will solve your next problem..

  20. MAK says:

    Thanks alot for this tutorial.
    I have a question, if I want to display the pagination links from right to left, for languages like hebrew and arabic as the following:
    Last Next 5 4 3 Prev First
    How I can do that with this library?

  21. tohin says:

    hmmm…
    To that i think here is a quick / dirty solution … maybe a better solution can be generate.
    In create_link() function of this library the each link is concat in $output variable.
    Now follow this steps:

    1. Create an array $output = array();
    2. Change all $output .= to $output[] =
    3. Now handle double slash and wrapper ( you can see these 2 lines before return $output. )
    4. Then generate the output string reverse from that array. ( you can use implode after using array reverse )

    Hope this does your work .. ๐Ÿ™‚

  22. tohin says:

    What mistake i and other made ??
    Why can’t we be friends just because we are not egyptian ?? :((

    JUST kiDDING… ๐Ÿ™‚

  23. MAK says:

    Thanks alot tohin said,

    It works for me but when i made reverse to the output array I got the same prblem, when I skipped the reverse the pagination links works fine. ๐Ÿ™‚

  24. tohin says:

    @abada.. be a twitter guy .. add me .. and i will add you ๐Ÿ™‚

    @MAK what problem . ? put your code in http://www.etherpad.com and paste the link here.. this will help me to take a glance and other may help you out too.. ๐Ÿ™‚ …

  25. MAK says:

    @tohin said
    Here is the link of the jquery pagination class after i add my changes
    http://bt2vca.bay.livefilestore.com/y1pzKX5M9BNHVfWT0JaagKvRTO1C13VPkvjp32jyc6_RhWppkiE3swKpHA9d2J1scz3j32i1ERhmz_-hDRzhuCofHoSfWSMhv7j/Jquery_pagination.php?download

    when replace the LAST with ุงู„ุงุฎูŠุฑู‡
    And NEXT with ุงู„ุชุงู„ูŠ
    FIRST with ุงู„ุงูˆู„
    PREVIOUS with ุงู„ุณุงุจู‚

    and generate the paging links the links displayed incorrect.

    But when I skipped the reverse and making array with the paging links and then generate the links the links displayed correctly.

  26. tohin says:

    @MAK displayed incorrent means arabic character or some other incorrection.

    another thing MAK please download the library from download section .. i haven’t updated the link inside the post. Just put a Note on top..where to find the latest code.

  27. MAK says:

    @tohin said

    first i downloaded the files from the the links which added in this page
    http://www.jhorotek.com/downloads/codeigniter/jquery_pagination.rar
    AND
    http://www.jhorotek.com/downloads/codeigniter/Jquery_pagination_20080925.rar

    But now I have downloaded the new files from the download section.

    I guess the problem which occured with me when displaying arabic labels in the bagination with numbers like 1 2 3 , the numbers must be like 3 2 1, when I made reverse of the array the problem still occure, but when I made implode then return the links the paging links appears correctly.

    Thanks tohin for this library.

  28. mazhel says:

    how about pagination from array variable in codeigniter ?
    example :
    i have $mydata = array();
    array (
    [0]=>”hallo”
    [1] =>”world”
    [2]=>’!!!”
    );
    and i want to place per array index to different page..
    please advice me..!!

  29. Husain says:

    is it correct statement to initialise Jquery_pagination ?
    $this->Jquery_pagination->initialize($config);
    because i m using this and it will not work and show following error

    Call to a member function initialize() on a non-object in D:\wamp\www\College\system\application\controllers\College_controller.php on line 44

    if not what will be the way to execute your Jquery_pagination code

  30. Rick says:

    Hey

    I have a big problem with the rebind and its causing me to duplicate code
    When the page is init everything works, so when i press the pag link the binding gets lost… so i had to make a quick function that is called so the page can be rebound.. but what happens is everytime I add code that works on the first page i have to cary it over to the function for it to work
    making duplicate code…. did you ever come up with a good solution
    and the code is not small it spans a few lines… so i have to do that twice..

    Thanks
    Rick

  31. tohin says:

    Let me guess.. you have some find and add event code in rebind section. For example: in pagination body there are some items which are clickable $(‘.link’).click(function(){alert(‘Yeah’);}); . Put this code in a function. and in rebind config set that function. Now if any Pagination link got clicked it shows the ajax content then call that function. Which works as charm.

    Have you seen the latest files from github. It has some additional feature.

  32. jenny says:

    I have done everything and the jquery links are generated correctly. But nothing happens when i click the links. Please help me.

  33. tohin says:

    Possible Bug: Your jquery.js file is not loaded properly .. Use firebug to detect any js error . If still nothing then check generated HTML code .

  34. jenny says:

    acutally i had made a mistake in div id’s name.
    But another problem arises. when i click on link it open the full page inside the page! in the page opened in the main page, links are working fine!
    can anybody please tell me how to remove that…

  35. tohin says:

    Follow the example code. The function which is providing the ajax content is loading the full view which should only generate the ajax content section.

  36. mutia says:

    hi tohin, your plugin very useful..
    but can you tell me how can i send a parameter?

    i follow this from your comment above, bui i have an error “missing ) after argument” :

    how send an extra value in config:
    $config[‘extra_param’] = ‘your_code’;

    in library :

    add a variable in class :

    var $extra_param = ”;

    and in function: getAJAXlink()

    $.post(‘”. $this->base_url . $count .”‘ ” . $this-> extra_param .”

    can u help me?

  37. tohin says:

    sorry for the late response; i do think u have already solved it.. that was just a suggestion to achieve the goal.

    You should check the latest doc in github repository. the variable is now changed into : additional_param.

  38. Birtan YILDIZ says:

    I have the same problem with jenny; and i couldnt solve it.

    acutally i had made a mistake in div idโ€™s name.
    But another problem arises. when i click on link it open the full page inside the page! in the page opened in the main page, links are working fine!
    can anybody please tell me how to remove thatโ€ฆ

  39. tohin says:

    Please check the example: you should separate the search result printing function from landing function .. and set that search result function url to base_url :)..

  40. Luciano says:

    Hey!!! your plugin was very useful and the best iยดve tasted.
    Could you tell me how to add a parameter as a search field to filter the query.
    Perform several tests with jquery and ajax but none of them work for me.
    I need the keyup event of an input also perform the update of the content.
    I need guidance on this
    Thanks!

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