Fork me on GitHub

La pagination


This example shows how to paginate an ajax request.

Showing page number 1

The paginator() method of the Jaxon functional component is used to paginate an ajax request to a component method. The page() method receives as parameter a callback which displays the paginated content in the DOM element with a given id. The render() method displays the pagination links in the DOM element with a given id.

The HTML code.

<div class="row">
    <div class="col-md-12" id="page-text">
        Showing page number 1
    </div>
    <div class="col-md-12" id="pagination">
    </div>
</div>
The Jaxon setup code.

<?php

use Jaxon\Jaxon;

class HelloWorld extends \Jaxon\App\FuncComponent
{
    public function sayHello(bool $isCaps)
    {
        $text = $isCaps ? 'HELLO WORLD!' : 'Hello World!';
        $this->response()->html('page-text', $text);
    }

    public function showPage($pageNumber)
    {
        $itemsPerPage = 10;
        $totalItems = 150;
        $this->paginator($pageNumber, $itemsPerPage, $totalItems)
            ->page(function(int $page) {
                $this->response()->html('page-text', "Showing page number $page");
            })
            ->render($this->rq()->showPage(), 'pagination');
    }
}

// Register object
$jaxon = jaxon();

$jaxon->setOption('js.lib.uri', '/js');

$jaxon->register(Jaxon::CALLABLE_CLASS, HelloWorld::class);
The Javascript code is generated from this PHP template.

jaxon.dom.ready(() => {
    <?= rq('HelloWorld')->showPage(1) ?>;
});