"Cannot read property 'length' of undefined" when trying click next page

[suhardiyan]

Hi I got difficulties, I success showing data to datatable, but when I click on paging or I do searching, its not working, saying : "Uncaught TypeError: Cannot read property 'length' of undefined"

Controller :

        $posts = $this->DataTables->find('Posts', 'all', [
            'contain' => ['Users', 'PostCategories'],
            'order' => ['users.id' => 'desc'],
        ]);
        $this->set('posts', $posts);
        $this->set('_serialize', array_merge($this->viewVars['_serialize'], ['posts']));

View :

<?= $this->Html->script('/backend/plugins/bower_components/datatables/jquery.dataTables.min.js') ?>
<?= $this->Html->script('DataTables.cakephp.dataTables.js') ?>
<?php
    $options = [
        'ajax' => [
            'url' => $this->Url->build() // current controller, action, params
        ],
        'data' => $posts,
        'deferLoading' => $posts->count(), // https://datatables.net/reference/option/deferLoading
        'columns' => [
            [
                'name' => 'posts.id',
                'data' => 'id',
                'visible' => false,
                'searchable' => false,
            ],
            [
                'title' => __('Title'),
                'name' => 'posts.title',
                'data' => 'title'
            ]
        ],
        'order' => [1, 'asc'], // order by username
    ];
?>

<?php echo $this->DataTables->table('posts', $options, ['class' => 'table table-striped']); ?>

Any help will appreciate

[suhardiyan]

edited into this : Controller :

        $data = $this->DataTables->find('Posts', 'all', [
            'contain' => ['Users', 'PostCategories'],
            'order' => ['users.id' => 'desc'],
        ]);
        $this->set('data', $data);
        $this->set('_serialize', array_merge($this->viewVars['_serialize'], ['data']));

View :

    $options = [
        'ajax' => [
            'url' => $this->Url->build(),
        ],
        'data' => $data,
        'deferLoading' => $data->count(), // https://datatables.net/reference/option/deferLoading
        'columns' => [
            [
                'name' => 'Posts.id',
                'data' => 'id',
                'visible' => false,
                'searchable' => false,
            ],
            [
                'title' => __('Title'),
                'name' => 'Posts.title',
                'data' => 'title'
            ],
            [
                'title' => __('Category'),
                'name' => 'PostCategories.name',
                'data' => 'post_category.name'
            ],
            [
                'title' => __('Author'),
                'name' => 'Users.username',
                'data' => 'user.username',
                'className' => 'text-primary',
            ],
            [
                'title' => __('Status'),
                'name' => 'Posts.is_active',
                'data' => 'is_active'
            ],
        ],
        'order' => [0, 'asc'], // order by username
    ];

Conclusion dont edit 'data' variable name into another name.

[ypnos-web]

As explained at the end of the Quick Start Tutorial:

DataTables performs JSON requests and CakePHP's JSON view uses the serialize view variable to determine which view variables to send back. The DataTables plugin sets a bunch of these, so it is crucial to append the data variable here. If your view variable is not called 'data', set DataTables ajax.dataSrc option.