Login

dpx2007 · 09-21-2015, 08:34 AM

Hi,

I don't know how to paginate with ajax jquery in codeigniter, please help me.

Thanks.

PaulD · 09-21-2015, 10:28 AM

I would start with the docs for pagination. http://www.codeigniter.com/user_guide/li...ation.html

Adding in Ajax would mean recalling the page contents using your pagination system to deliver the new content via an ajax call in js.

Using Jquery would mean writing your ajax call using jquery JS library.

What you are asking is quite complicated and would take an age to answer. Start with non-ajax delivery of pagination links via CI library and once that is working you can then use JS to put it into an ajax call.

Best wishes,

Paul.

dpx2007 · 09-21-2015, 11:30 AM

Thank for your reply.
I have done with non-ajax delivery of pagination links via CI library, it's no problem.
Here's my code with ajax, it doesn't respond as i click page link!

- View: page_view_ajax.php
- Model: page_model.php
- Controller: Page_ajax.php
1. View: page_view_ajax.php

Code:
<!DOCTYPE html>

<html>

<head>

    <title>Test</title>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script>

        $(document).ready(function(){

            load(1);

            $("#paginator a").click(function(){

                var cur_page = $(this).attr('data-ci-pagination-page'); // I haved test with attr('href') but not ok.

                load(cur_page);

            });

        })

        function load(page){

            var page_num=page;

            $.ajax({

                url: "<?php echo base_url();?>pages_ajax/show" ,

                type: "post",

                data: "page=" + page_num,

                datatype: "JSON",

                success:function(res){

                    //var res=$.parseJSON(res);

                    $("#tcontent").html(res.table);

                    $("#page").html(res.page);

                }

            })

        }

    </script>

</head>

<body>

<div id="tbl_list">

    <table border="1">

        <caption>table title and/or explanatory text</caption>

        <thead>

            <tr>

                <th>ID</th>

                <th>First Name</th>

                <th>Last Name</th>

                <th>Gender</th>

                <th>Address</th>

                <th>Check</th>

            </tr>

        </thead>

        <tbody id="tcontent">

        </tbody>

    </table>

</div>

<div id="page">

</div>

</body>

</html>

2. Controller: Page_ajax.php

Code:
<?php

    /**

    *

    */

    class Pages_ajax extends CI_Controller

    {

        public function __construct()

        {

            parent::__construct();

            $this->load->model('page_model');

            $this->load->helper('url');

        }

        public function index()

        {

            $this->load->view('page_view_ajax');

        }

        public function show()

        {

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

            $limit=3;

            //$config['base_url'] =base_url('pages_ajax/show');

            $config['base_url'] ='#';

            $config['total_rows'] = $this->page_model->total_rows();

            $config['per_page'] = $limit;

            $config['uri_segment']=3;

            $config['use_page_numbers'] = TRUE;

            $config['full_tag_open'] = '<div id="paginator">';

            $config['full_tag_close'] = '</div>';

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

            $page_link = $this->pagination->create_links();

            //Tính start cho từng phân đoạn (limit) trong trường hợp hiện thị số trang thực tế $config['use_page_numbers'] = TRUE

            //$start = $this->uri->segment(3);

            $start=$this->input->post('page');

            $start=empty($start)?0:($start-1)*$limit;

            $list = $this->page_model->showall($start,$limit);

            $table = '';

            foreach($list as $row):

            $table.='<tr>';

                $table.='<td>'.$row->id.'</td>';

                $table.='<td>'.$row->firstName.'</td>';

                $table.='<td>'.$row->lastName.'</td>';

                $table.='<td>'.$row->gender.'</td>';

                $table.='<td>'.$row->address.'</td>';

                $table.='<td>'.$start.'</td>'; // This col is to check $start

            $table.='</tr>';

            endforeach;

            $data =array(

                'table'=>$table,

                'page'=>$page_link

            );

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

            $this->output->set_content_type('application/json');

            echo json_encode($data);

        }

    }

 ?>

3. Model: page_model

Code:
<?php

/**

*

*/

class page_model extends CI_Model

{

    public function __construct()

    {

        parent::__construct();

        $this->load->database();

    }

    public function showall($start,$limit)

    {

        $this->db->order_by('id ASC');

        $this->db->limit($limit,$start);

        $result = $this->db->get('persons');

        return $result->result();

    }

    public function total_rows()

    {

        return $this->db->count_all('persons');

    }

}

?>

Thanks.

mwhitney · 09-21-2015, 01:12 PM

There are two obvious issues with your view:

1. Start with the page you generated via CodeIgniter's pagination library. Don't waste your user's time sending the templated HTML without any content in the table and pager, especially since you've hard-coded the first page into your document-ready script (and you can take that out if you start with the content already filled in). This has the added benefit of (hopefully) continuing to work if the user disables JavaScript.

2. Your script is defining a click-handler with an invalid selector, there's nothing on the page with an id of "paginator".

Bonfire

Practical CodeIgniter 3
CodeIgniter Testing Guide

ivantcholakov · 09-21-2015, 02:26 PM

If you already have a non-AJAX implementation, a possible way to continue is to have a look at the following project: https://github.com/defunkt/jquery-pjax

dpx2007 · 09-21-2015, 10:04 PM

Thank you for all,

I'm a newbie about codeigniter. So, could you show me how to solve this issue with the code posted here?

BR,