Question

Im trying to implement the endless pagination jquery plugin found here ( https://github.com/jney/jquery.pageless ) into my codeigniter project.

The jquery code i enter is the same as whats on the demo page

$('#results').pageless({ totalPages: 10
, url: '/theurl/index'
, loaderMsg: 'Loading more results'
});

and the code i have in my codeigniter controller is as follows

    $config['base_url'] = base_url() . 'theurl/index';
    $config['total_rows'] = $this->model->record_count();
    $config['per_page'] = 20;
    $config['uri_segment'] = 3;

    // Init the config
    $this->pagination->initialize( $config );

    // Create pagination
    $page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
    $data['results'] = $this->onyafeet->fetch_results($config['per_page'], $page);
    $data['links'] = $this->pagination->create_links();

    // Load the view and pass through all the data
    $this->load->view('theurl/index', $data);

When i run the code, and reach the bottom of the page, it does work, but it also loads the enter page into the new div it creates just for the results.

Any help would be greatly appreciated.

Cheers

Answer 1

maybe you should load the results into a partial view, because otherwise you’re loading again the whole page. Create a partial view to load all the data, and then, load the partial view into the main page:

$config['base_url'] = base_url() . 'theurl/index';
$config['total_rows'] = $this->model->record_count();
$config['per_page'] = 20;
$config['uri_segment'] = 3;

// Init the config
$this->pagination->initialize( $config );

// Create pagination
$page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
$data['results'] = $this->onyafeet->fetch_results($config['per_page'], $page);
$data['links'] = $this->pagination->create_links();
// AJAX load: 
if ($this->input->is_ajax_request) {
    $this->load->view('theurl/partial/ajax_partial',$data);
}
else {
    // Load the view and pass through all the data
    $this->load->view('theurl/index', $data);
}

I think that with this approach should work, the partial view must only have the right part that you want to show, the div with all the content you want to load asynchronously.