CodeIgniter / jQuery - pagination - infinite pagination

Question

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

The jquery code I entered is the same as on the demo page

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

and the code that 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 get to the bottom of the page, it works, but it also loads the input page into a new div, which it only creates for the results.

Any help would be greatly appreciated.

Greetings

Answer 1

perhaps you should load the results in a partial view, because otherwise you will reload the entire page. Create a partial view to load all the data, and then upload a partial view to 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 it should work, the partial view should only have the part you want to show, a div with all the content that you want to load asynchronously.