Cakephp Ajax pagination links doesnt work

Question

I have a table where i want to use pagination my table data is filled in by Ajax.

This is the table im working with:

<div class="portlet box green Report index">
    <div class="portlet-title">
        <div class="caption"><i class="icon-globe"></i>Report Summary</div>
        <div class="tools">
            <a href="javascript:;" class="collapse"></a>
        </div>
    </div>
    <div class="portlet-body">
    <div id="content">
        <table class="table table-striped table-bordered table-hover table-full-width" id="sample_1">
            <thead>
            <tr id='content2'>
                <?php //echo $content_for_layout; ?>
                <th><?php echo $this->Paginator->sort('name); ?></th>
                <th><?php echo $this->Paginator->sort('clicks); ?></th>
                <th><?php echo $this->Paginator->sort('conversions'); ?></th>
                <th><?php echo $this->Paginator->sort('payout'); ?></th>
                <th><?php echo $this->Paginator->sort('ltr'); ?></th>
                <th><?php echo $this->Paginator->sort('cpc'); ?></th>
            </tr>
            </thead>
            <tbody class="report_data">
            </tbody>
        </table>
    </div>
    </div>
</div>

On top of my view i have the following:

  $this->Paginator->options(array(
    'update' => '#content2',
    'evalScripts' => true,
));

And in my controller i have remembered to have the following helpers and components:

    public $components = array('RequestHandler');

public $helpers = array('Js' => array('Jquery'), 'Paginator');

And at the end of my view i have added:

<?php echo $this->Js->writeBuffer(); ?>

Now whenever i click one of the table links the site reloads BUT there are two main problems:

1. The data sent back to the paginator does not contain a sort nor an order (aka the site is basicly just reloading)

2. The Render of the site is messing up (this is a minor problem but still very annoying)

Can anyone tell me what i am doing wrong?

Cake version 2.3

My Cntroller

    class ReportsController extends AppController
{
    public $name = 'Reports';

        public $components = array( 'BloglicHelper', 'RequestHandler', 'HasOffers');

        public $helpers = array('Js' => array('Jquery'), 'Paginator');
        public $paginate = array(
        'fields' => array(
         'Stat.clicks'
        ,'Offer.name'
        ,'Stat.currency'
        ,'Stat.conversions'
        ,'Stat.payout'
        ,'Stat.ltr'
        ,'Stat.cpc'
        ,'Stat.affiliate_id')

    ,'conditions' => array(    'Stat.affiliate_id' => array(
            'conditional' => "EQUAL_TO",
            'values' => array(1002)
        )

        , 'Stat.date' => array(
                'conditional' => 'BETWEEN'
            , 'values' => array(
                )
            ),
        ),
        'group' =>array('Offer.name'),
        'Method' => 'getStats',
        'totals' => true

    );
    public function index(){
        $this->layout = 'client_layout';
    }

    public function ajax_index(){
        if ($this->RequestHandler->isAjax())
        {
            $this->autoLayout = false;
            $this->autoRender = false;
            $this->layout = 'ajax';
        }

        //request selected dates
        $startDate = $this->request->data['startDateTime'];
        $endDate = $this->request->data['endDateTime'];

        array_push($this->paginate['conditions']['Stat.date']['values'], $startDate, $endDate);
;

        $finalData = array( 'table' => $this->paginate());
        print json_encode($finalData);

    }

}

Answer 1

Add this line at the top of your view file.

$this->Paginator->options(array(
    'update' => '#content',
    'evalScripts' => true,
));

Here you have to update the whole table instead of only one row i.e. #content2

  <div class="portlet box green Report index">
    <div class="portlet-title">
        <div class="caption"><i class="icon-globe"></i>Report Summary</div>
        <div class="tools">
            <a href="javascript:;" class="collapse"></a>
        </div>
    </div>
    <div class="portlet-body">
        <div id="content">
            <table class="table table-striped table-bordered table-hover table-full-width" id="sample_1">
                <thead>
                    <tr id='content2'>
                        <?php //echo $content_for_layout; ?>
                        <th><?php echo $this->Paginator->sort('name'); ?></th>
                        <th><?php echo $this->Paginator->sort('clicks'); ?></th>
                        <th><?php echo $this->Paginator->sort('conversions'); ?></th>
                        <th><?php echo $this->Paginator->sort('payout'); ?></th>
                        <th><?php echo $this->Paginator->sort('ltr'); ?></th>
                        <th><?php echo $this->Paginator->sort('cpc'); ?></th>
                    </tr>
                </thead>
                <tbody class="report_data">
                </tbody>
            </table>
            <ul>
                <?php if ($this->Paginator->hasPrev()): ?>
                    <li><?php echo $this->Paginator->first(__('First')) ?></li>
                    <li><?php echo $this->Paginator->prev(__('Prev'), array(), null, array('class' => 'prev disabled')) ?></li>
                    <?php
                endif;

                echo $this->Paginator->numbers(array('currentTag' => 'span', 'currentClass' => 'active',
                    'separator' => false, 'tag' => 'li', 'modulus' => 5));

                if ($this->Paginator->hasNext()):
                    ?>
                    <li><?php echo $this->Paginator->next(__('Next'), array(), null, array('class' => 'next disabled')) ?></li>
                    <li><?php echo $this->Paginator->last(__('Last')) ?></li>
                <?php endif ?>
            </ul>
           <?php echo $this->Js->writeBuffer(); ?>
        </div>
    </div>
</div>

having some errors in

<th><?php echo $this->Paginator->sort('name); ?></th>
<th><?php echo $this->Paginator->sort('clicks); ?></th>

these two lines

<?php echo $this->Js->writeBuffer(); ?> should be inside the element which you want to update. i.e. here #content

you can get more information here.