How to paginate with ajax using pager library in codeigniter 4

Question

hellow everyone, I am creating ajax pagination with CI4 Pager library, but I found it difficult to catch id of the pagination counter. instead of using full URI path like "localhost/view-user/?page=1", I want to be able to catch only "1" so I can pass it using javascript as post variable that will allow me to path inside paginate method as parameter like this( paginate(5, 'test', $page = 1)). How can I do that and make it work with ajax?

//html pagination links

    <nav aria-label="<?= lang('Pager.pageNavigation') ?>">
        <ul class="pagination">
            <?php foreach ($pager->links() as $link) : ?>
                <li <?= $link['active'] ? 'class="active"' : '' ?>>
                    <a href="<?= $link['uri'] ?>">
                        <?= $link['title'] ?>
                    </a>
                </li>
            <?php endforeach ?>
        </ul>
    </nav>

    //dataset like this inside anchor tag "data-page" 
     where the counter variable it will be an integer 
    
    <a href="<?= $link['uri'] ?>" data-page="<?= $counter ?>"></a>

// my controller

    public function view(){
        if ($this->request->isAJAX()) {
            $page = $this->request->getPost('page');

            $result = $this->model->getKanda()->paginate(20,'default',$page);
            $pager = $this->model->pager;
            $output = array();
            foreach($result as $row){
                $output[] = [
                     'id' => $row['userid'],
                     'username' => $row['username'],
                ];
            }

            $json = [
                'result'=> $output, 
                'pager' => $pager->links(),
            ];
            return $this->response->setJSON($json);
        }
    }

my js

    $(document).on('click', 'ul.pagination li a', function(e){
         e.preventDefault();
         let page = $(this).data('page');
          viewUser(page);
    });

    function viewUser(page){
       let ajax   = $.ajax({
                       url: 'view-user',
                       method:'post',
                       data: { page: page },
                       dataType: 'json',
                    });

       ajax.done(function(data){
              let html = '';
              $.each(data.result, function(k, v){
                   let dataSet = `
                            data-id='${v.id}' 
                            data-kanda='${v.username}' 
                     `;
                   html += `<div>${v.username}</div>`;
              });
              $('.result').html(html);
              $('.paginator').html(data.pager);
       });
    }

Answer 1

I decided to add additional methods inside Codeigniter4\framework\system\Pager\PageRenderer.php. So it will asstist when want to set data attribute inside Pagination anchor tag ie.

 <a href="" data-page="<?= $pager->getFirstPageCounter() ?>"> <?= $pager->getFirst() ?>

// pageRenderer.php

    <?php 
     
    /**
     * vena add counter methods 2021
     */
     
    // Get First Page Number 
    public function getFirstPageCounter(): int
    {
        if ($this->segment === 0){
            $firstPage = 1;
        }else{
            $firstPage = $this->segment;
        }
     
        return (int) $firstPage;
    }
     
    // get Last page Number
    public function getLastPageCounter()
    {
        if ($this->segment === 0){
            $last = $this->pageCount;
        }else{
            $last = $this->segment;
        }
        return (int)$last;
    }
     
    // Get previous Page number
    public function getPreviousPageCounter()
    {
        if (! $this->hasPrevious()){
            return null;
        }
     
        if ($this->segment === 0){
            $previous = $this->first - 1;
        }else{
            $previous = $this->segment;
        }
     
        return (int) $previous;
    }
     
    // get Next Page Number
    public function getNextPageCounter()
    {
        if (! $this->hasNext()){
            return null;
        }
     
        if ($this->segment === 0){
            $next = $this->last + 1;
        }else{
            $next = $this->last + 1;
        }
        return (int) $next;
    }
     

Pager\Views\default_full.php

        <?php
         \CodeIgniter\Pager\PagerRenderer $pager
         
        $pager->setSurroundCount(2);
        ?>
         
        <nav aria-label="<?= lang('Pager.pageNavigation') ?>">
            <ul class="pagination">
                <?php if ($pager->hasPrevious()) : ?>
                    <li>
                        <a href="<?= $pager->getFirst() ?>" aria-label="<?= lang('Pager.first') ?>" data-page="<?= $pager->getFirstPageCounter() ?>"> <span aria-hidden="true"><?= lang('Pager.first') ?></span></a>
                    </li>
                    <li>
                        <a href="<?= $pager->getPrevious() ?>" aria-label="<?= lang('Pager.previous') ?>" data-page="<?= $pager->getPreviousPageCounter() ?>"> <span aria-hidden="true"><?= lang('Pager.previous') ?></span> </a>
                    </li>
                <?php endif ?>
         
                <?php foreach ($pager->links() as $link) : ?>
                    <li <?= $link['active'] ? 'class="active"' : '' ?>>
                        <a href="<?= $link['uri'] ?>" data-page="<?= $link['title'] ?>"> <?= $link['title'] ?> </a>
                    </li>
                <?php endforeach ?>
         
                <?php if ($pager->hasNext()) : ?>
                    <li>
                        <a href="<?= $pager->getNext() ?>" aria-label="<?= lang('Pager.next') ?>" data-page="<?= $pager->getNextPageCounter() ?>"> <span aria-hidden="true"><?= lang('Pager.next') ?></span></a>
                    </li>
                    <li>
                        <a href="<?= $pager->getLast() ?>" aria-label="<?= lang('Pager.last') ?>" data-page="<?= $pager->getLastPageCounter() ?>"> <span aria-hidden="true"><?= lang('Pager.last') ?></span></a>
                    </li>
                <?php endif ?>
            </ul>
        </nav>