Adding infinite scroll to codeigniter pagination

Question

I have been trying to add infinite scrolling to codeigniter's pagination with this plugin.

http://www.infinite-scroll.com

This is my codes so far:

<script type = "text/javascript">

    $('#comments').infinitescroll({

        navSelector  : "a#next:last",    // selector for the paged navigation (it will be hidden)
        nextSelector : "a#next:last",    // selector for the NEXT link (to page 2)
                    itemSelector : "#comments"       // selector for all items you'll retrieve
              });

</script>

This is the default usage. Let us assume #comments hold my content. My paginated page looks something like these.

http://localhost/ci/index.php/chat/load/p1u/10
http://localhost/ci/index.php/chat/load/p1u/20

etc.

I have even added this line of code to make it work but with no success:

<a id="next" href="http://localhost/ci/index.php/chat/load/p1u/10">next page</a>

Any ideas?

I found a workaround. I used jquery to determine when i reached the end of the scroll div and append the content from load/p1u/10 to the html. Since the next page will obviously be /20 /30 and so on, i kept a global variable that increments each time by 10, when the end of the window is reached. This works fine and the content is displayed appropriately. — Dpkg Me
– Dpkg Me, Commented Jun 11, 2012 at 20:14

Phil Sturgeon · Accepted Answer · 2013-01-06 02:33:24Z

1

Switch to using $config["use_page_numbers"] in pagination.php if you want to use /1 /2 /3 instead of /10 /20 /30.

answered Jan 6, 2013 at 2:33

Phil Sturgeon

30.8k12 gold badges82 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin Remisoski · Accepted Answer · 2013-08-04 05:26:10Z

1

I've found that this definitely works better with $config["use_page_numbers"] = TRUE; but if you're going to go that route, you'll have to adjust your offset. This is how I got it working:

$offset = ($this->uri->segment(2)) ? ($this->uri->segment(2) * $config["per_page"]) - $config["per_page"] : 0;

answered Aug 4, 2013 at 5:26

Kevin Remisoski

4894 silver badges9 bronze badges

Comments

Pratik · Accepted Answer · 2016-10-03 12:12:29Z

i have simple step for the scrolling pagination in code igniter, i have check this it work better

$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
        // run our call for pagination
        var table = document.getElementById("table");
        var lastRowIndex = table.rows.length-1;
        loadMore(lastRowIndex);
    }
});

function loadMore(lastRowIndex)
{
$.ajax({
    url: "http://localhost/CodeIgniter/index.php/form/loadmore",  //form is y controller
    type:'POST',
    data: "row="+lastRowIndex, // row wich is post
    success: function(data){    //here data which recevie form controller
        var json = JSON.parse(data);
        var count = json.length;
        var html;
        for( var i = 0; i < count; i++ )
        {
            html += '<tr>';
            html += '<td><input type="checkbox" name="id[]" id="id[]" class="check" value="'+ json[i].id +' "></td>';
            html += '<td>'+ json[i].id +'</td>';
            html += '<td><img src="http://localhost/CodeIgniter/upload/'+ json[i].image +'" class="img-circle" height="25" width="30"></td>';
            html += '<td> ' + json[i].firstname +'</td>';
            html += '<td> ' + json[i].middlename +'</td>';
            html += '<td> ' + json[i].lastname +'</td>';
            html += '<td> ' + json[i].address +'</td>';
            html += '<td> ' + json[i].mobile +'</td>';
            html += '<td> ' + json[i].email +'</td>';
            html += '<td> ' + json[i].gender +'</td>';
            html += '<td><a href="http://localhost/CodeIgniter/index.php/form/del/'+ json[i].id +'">Delete</a></td>';
            html += '<td><a href="http://localhost/CodeIgniter/index.php/form/edite/'+ json[i].id +'">Update</a></td>';
            html += '</tr>';
        }$("#body").append(html); //add this html to th table body which id='body'
    }   
});
}

i use this controller function

 public function loadmore()
 {
    $page=$_POST['row'];
    $per_page = 10;
    $student = $this->Form_model->getview_detail($per_page,$page);
    if($student !== FALSE)
    {
        echo json_encode($student); //send data to script
    }
}

`

and this is model

public function getview_detail($limit, $start)
{
    $this->db->limit($limit, $start);
    $query = $this->db->get('form');
    return $query->result_array();
}

Collectives™ on Stack Overflow

Adding infinite scroll to codeigniter pagination

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related