is it possible to paginate next and previous links to load page at a specific div

Question

Do get the question clear, to make it clear let me elaborate; what i need to achieve is that i have a page where pagination is going forward -working and when ever i paginate the page, page goes to the top of the page since it did refresh but i need it to stay at the div where pagination links are at. The content area where the pagination content is so, that it may appear that page did not load only content was updated. Do get the point.

code as follows:

<div class="large-12 columns" id="paginate" style="border-right: 1px solid #E3E5E8; height: 572px;">
    <article>
        <hr><div class="row">
            <div class="large-6 columns">
        <?php
        //stories complete do not edit. 
            foreach($stories as $story){

                echo '
                <p>'.$this->Html->image($story['image'].'.jpg', ['alt'=>'image for article']).'</p>
                </div>
                <div class="large-6 columns">
                <h5><a href="#">'.$story['title'].'</a></h5>
                <p>
                <span><i class="fi-torso"> Creator: '.$story['creator'].' &nbsp;&nbsp;</i></span>
                <span><i class="fi-calendar"> '.$story['created'].' &nbsp;&nbsp;</i></span>

                </p>
                <p>'.$story['story'].'</p>';

                //same place after pagination
                //
            }

        ?>

            </div>

                <div style="padding: 2px;float: left;margin-top: 31%;margin-left: -1206px;">
                    <ul class="pagination" role="navigation" aria-label="Pagination">
                        <li><?php echo $this->Paginator->prev(' < ' . __(''));?></li>
                        <li><?php echo $this->Paginator->numbers();?></li>
                        <li><?php echo $this->Paginator->next(' > ' . __(''));?></li>
                    </ul>
                </div>
            </div><hr>

        </article>
    </div>

According to the code and earlier Cakephp code we were able to add a link to div with paginator and it would take us direct to a specific div, i can't figure out syntax to do that with cakephp-4.x so be kind and give your best solution with least amount of code.

Answer 1

I have found a solution to problem. That is far constructive than any other solution one can find anywhere from internet. I will describe code and put code snippet so that everyone and anyone is able to do so with just a read from my code snippet.

First Declare Pagination for a specific Model. After that Initialise Paginator code snippet. Once you have done above mention so, load and Query paginator to given model. After that Set variable along with compact.

At template side make sure you have followed above mention process all your given code will be assigned at controller end and works at template side automatically. I put that code for template at bottom of snippet take a good read and implement your code where ever and when ever there is request and response among controller and template.

Put below code to controller:

    public $paginate = [

        'Stories' => ['scope' => 'story',
                      'limit' => 1,
                      ]
    ];


    public function initialize(): void
    {
        parent::initialize();
        $this->loadComponent('Paginator');
    }

    public function index()
    {

        // Paginate property
        $this->loadComponent('Paginator');

        $stories = $this->paginate($this->Stories->find('all', ['scope' => 'story']));
        $this->set(compact('employers'));
    }

Below code to Template:

<div class="column" id="success_story">
    <hr>
    <h4 style="margin: 0;" class="text-center">SUCCESS STORIES</h4>
    <hr>
</div>

<?php
  //stories complete do not edit. 
  foreach($stories as $story){

    echo '
    <p>'.$this->Html->image($story['image'].'.jpg', ['alt'=>'image for article']).'</p>
    </div>
    <div class="large-6 columns">
    <h5><a href="#">'.$story['title'].'</a></h5>
    <p>
    <span><i class="fi-torso"> Creator: '.$story['creator'].' &nbsp;&nbsp;</i></span>
    <span><i class="fi-calendar"> '.$story['created'].' &nbsp;&nbsp;</i></span>

    </p>
    <p>'.$story['story'].'</p>
    ';
  }
?>

<div style="padding:0px;margin:0px;margin-bottom: -35px;">
  <ul class="pagination" role="navigation" aria-label="Pagination">
    <li><?php echo $this->Paginator->prev(' < ' . __(''));?></li>
    <li><?php echo $this->Paginator->next(' > ' . __(''));?></li>
  </ul>
</div>

put a link to success_story(div) as #(indicator)