Codeigniter application: how can I display pagination as JSON?

Question

I am working on a blog application with Codeigniter 3.1.8.

Currently, its admin area is well separated from the frontend.

In the frontend, I have managed to replace "classic" Codeigniter views with JSONS. (the JSONS are displayed and "handled" with AngularJS).

Here is the code in the controller for all the posts:

private function _initPagination($path, $totalRows, $query_string_segment = 'page') {
        //load and configure pagination 
        $this->load->library('pagination');
        $config['base_url'] = base_url($path);
        $config['query_string_segment'] = $query_string_segment; 
        $config['enable_query_strings'] =TRUE;
        $config['reuse_query_string'] =TRUE;
        $config['total_rows'] = $totalRows;
        $config['per_page'] = 12;
        if (!isset($_GET[$config['query_string_segment']]) || $_GET[$config['query_string_segment']] < 1) {
            $_GET[$config['query_string_segment']] = 1;
        }
        $this->pagination->initialize($config);

        $limit = $config['per_page'];
        $offset = ($this->input->get($config['query_string_segment']) - 1) * $limit;

        return ['limit' => $limit, 'offset' => $offset];
    }

    public function index() {

    //call initialization method
        $config = $this->_initPagination("/", $this->Posts_model->get_num_rows());

        $data = $this->Static_model->get_static_data();
        $data['pages'] = $this->Pages_model->get_pages();
        $data['categories'] = $this->Categories_model->get_categories();  

        //use limit and offset returned by _initPaginator method
        $data['posts'] = $this->Posts_model->get_posts($config['limit'], $config['offset']);

        // All posts
        $this->output->set_content_type('application/json')->set_output(json_encode($data,JSON_PRETTY_PRINT));
    }

What I have not been able to do (despite tormenting my brain), is display the pagination of the posts as JSON too.

In the Posts model:

public function get_posts($limit, $offset) {
    $this->db->select('posts.*,categories.name as post_category');
    $this->db->order_by('posts.id', 'DESC');
    $this->db->join('categories', 'posts.cat_id = categories.id', 'inner');
    $query = $this->db->get('posts', $limit, $offset);
    return $query->result();
}

My pagination view:

<div class="pagination-container text-center">
    <?php echo $this->pagination->create_links(); ?>
</div>

UPDATE: I have pushed the entire application to Github. You can have an in-depth look if you want. To create all the MySQL tables, run the Install controller. :)

What shall I do?

Answer 1

Try something like this:

create new class in application/libraries/MY_Pagination.php

<?php

class MY_Pagination extends CI_Pagination
{
    public function get_as_array()
    {
        return [
            'total_rows' => $this->total_rows,
            'per_page' => $this->per_page,
            'cur_page' => $this->cur_page,
        ];
    }
}

in your controller use:

public function index() {

    //call initialization method
    $config = $this->_initPagination("/", $this->Posts_model->get_num_rows());

    $data = $this->Static_model->get_static_data();

    //this is the line I added
    $data['pagination'] = $this->pagination->get_as_array();

    $data['pages'] = $this->Pages_model->get_pages();
    $data['categories'] = $this->Categories_model->get_categories();  

    //use limit and offset returned by _initPaginator method
    $data['posts'] = $this->Posts_model->get_posts($config['limit'], $config['offset']);

    // All posts
    $this->output->set_content_type('application/json')->set_output(json_encode($data,JSON_PRETTY_PRINT));
}

For Angular can use something like https://ng-bootstrap.github.io/#/components/pagination/overview

Answer 2

You have two options:

request the create_links() string via ajax and append it to your page wherever you need. (btw you can style it however you want and return it already styled)

echo json_encode(['pagination' => $this->pagination->create_links()]);

or you can return all bits of information you need and process it yourself, all you need is current_page which you have already requested or get it via $this->uri->segment(3) and you need total number of pages which is total_rows/per_page.

echo json_encode(['total_pages' => $config['total_rows']/$config['per_page'], 'current_page' => $this->uri->segment(3)]);

Answer 3

I hope this will give you idea on how pagination is generated by Codeigniter.

Please Note: This is reference from CI 4 Documentation Version 4.0.0 rc1 Link: https://codeigniter4.github.io/userguide/libraries/pagination.html?highlight=pagination

<?php $pager->setSurroundCount(2) ?>

<nav aria-label="Page navigation">
    <ul class="pagination">
    <?php if ($pager->hasPrevious()) : ?>
        <li>
            <a href="<?= $pager->getFirst() ?>" aria-label="First">
                <span aria-hidden="true">First</span>
            </a>
        </li>
        <li>
            <a href="<?= $pager->getPrevious() ?>" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
    <?php endif ?>

    <?php foreach ($pager->links() as $link) : ?>
        <li <?= $link['active'] ? 'class="active"' : '' ?>>
            <a href="<?= $link['uri'] ?>">
                <?= $link['title'] ?>
            </a>
        </li>
    <?php endforeach ?>

    <?php if ($pager->hasNext()) : ?>
        <li>
            <a href="<?= $pager->getNext() ?>" aria-label="Previous">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
        <li>
            <a href="<?= $pager->getLast() ?>" aria-label="Last">
                <span aria-hidden="true">Last</span>
            </a>
        </li>
    <?php endif ?>
    </ul>
</nav>

Try sending all required variable used above in example for pagination from your controller as json data to your view and create it same as in example above.

Wish you all the best.

Answer 4

Let me know if it works

private function _initPagination($path, $totalRows, $page_offset) {
        //load and configure pagination 
        $this->load->library('pagination');
        $config = $this->config->item('pagination');
        $config['base_url'] = $path;
        $config['total_rows'] = $totalRows;
        $this->pagination->initialize($config);

        $limit = RECORDS_PER_PAGE;
        $offset = $page_offset;

        return ['limit' => $limit, 'offset' => $offset];
    }

    public function index() {

    $page_offset = ($this->input->get('per_page')) ? $this->input->get('per_page') : 0;

    //call initialization method
        $config = $this->_initPagination(site_url('controller_name/index?'), $this->Posts_model->get_num_rows(), $page_offset);

        $data = $this->Static_model->get_static_data();
        $data['pages'] = $this->Pages_model->get_pages();
        $data['categories'] = $this->Categories_model->get_categories();  

        //use limit and offset returned by _initPaginator method
        $data['posts'] = $this->Posts_model->get_posts($config['limit'], $config['offset']);

        // All posts
  }

Or make it more simple

public function index() {

    $params['limit'] = RECORDS_PER_PAGE; 
    $params['offset'] = ($this->input->get('per_page')) ? $this->input->get('per_page') : 0;

    $this->load->library('pagination');
    $config = $this->config->item('pagination');
    $config['base_url'] = site_url('controller/index?');
    $config['total_rows'] = $this->Posts_model->get_num_rows();
    $this->pagination->initialize($config);

    $data = $this->Static_model->get_static_data();
    $data['pages'] = $this->Pages_model->get_pages();
    $data['categories'] = $this->Categories_model->get_categories();  

    //use limit and offset
    $data['posts'] = $this->Posts_model->get_posts($param['limit'],$param['offset']);

  }