Ajax Pagination backward move in cakephp 3

Question

I am doing ajax pagination in cakephp 3.2

I have done code for forward move of pagination, by getting the last id .

If i want to go backward ,the pagination will not work ,i know .

How can i do it in a proper way so that it will work for both direction as well as direct click on any pagination index.

Below i have attached some of my codes ,which is working properly only for forward move of pagination.

I know the code won't work for backward move.

How can i do it?

      ///////////////////////////////////PAGINATION STARTS HERE/////////////////////////////////////////////////
        if(isset($_POST["page"])){
        $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); //filter number
        if(!is_numeric($page_number)){die('Invalid page number!');} //incase of invalid page number
    }else{
        $page_number = 1; //if there's no page number, set it to 1
    }
        $item_per_page=5;
       $get_total_rows = $this->Orders->find('all')->where($condition)->count(); //hold total records in variable
        $total_pages = ceil($get_total_rows/$item_per_page);
       $page_position = (($page_number-1) * $item_per_page);
          if($page_number>1)
          {
           $condition[] = ['Orders.id >' => $_POST["lastId"]];
          }//this one fetch all list greater than last id 


$Lists = $this->Orders->find('all')->where($condition)->order(['Orders.id' => 'ASC'])->limit($item_per_page)->toArray();

Thank you

Answer 1

Your Controller Action code should be

$this->paginate = [
    'order'=>[
        'field_name'=>'desc'
    ]  
];
$condition = [];
$query = $this->YourModel->find()->where($conditions);
$this->set('records', $this->paginate($query));

In view your code should be for listing part only, I dont know whta is your HTML structure but you can follow this, and dont forget about id=pagination_list_container in parent of your table and pagination link code.

<div class="panel-body" id="pagination_list_container">
        <div class="inner-spacer">
            <table class="table table-striped table-hover margin-0px">
                <thead>
                    <tr>
                        <th><?php echo $this->Paginator->sort('field_1', 'Column 1') ?></th>
                        <th><?php echo $this->Paginator->sort('field_2', 'Column_2') ?></th>
                        <th><?php echo $this->Paginator->sort('field_3', 'Column_3') ?></th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    if (empty($records->toArray())) {
                        ?>
                        <tr><td colspan="100%" class="text-danger text-center">No record found</td></tr>
                        <?php
                    } else {
                        foreach ($records as $record):
                            ?>
                            <tr>
                                <td><?php echo $record->field_1 ?></td>
                                <td><?php echo $record->field_2; ?></td>
                                <td><?php echo $record->field_3; ?></td>
                            </tr>
                        <?php endforeach; ?>
                    <?php } ?>
                </tbody>
            </table>
        </div>
        <div class="row">
            <div class="col-md-6">
                <ul class="pagination">
                    <?php
                    $this->Paginator->templates([
                        'current' => '<li class="active"><a>{{text}}</a></li>',
                        'number' => '<li><a href="{{url}}">{{text}}</a></li>'
                    ]);
                    echo $this->Paginator->prev('«');
                    echo $this->Paginator->numbers();
                    echo $this->Paginator->next('»');
                    ?>
                </ul>
            </div>
            <div class="col-md-6 text-right">
                <div class="mt30">
                    <?php
                    echo $this->Paginator->counter(
                            'Page {{page}} of {{pages}}, showing {{start}} to {{end}} of {{count}}'
                    );
                    ?>
                </div>
            </div>
        </div>
    </div>

Make AJAX behaviour in your view

You have to Apply Some Javascript event for ajax behaviour into #pagination_list_container

$(document).ready(function(){
    $("document").on('click','#pagination_list_container .pagination li a, #pagination_list_container table th > a', function(e){
      e.preventDefault();
      var link= $(this).attr('href');
      if(link!="")
      {
            $("#pagination_list_container").load(link+ "#pagination_list_container", function(){
                console.log("data loaded");
            })
      }
      return false;
    });
});