Using Jquery Datatable with Cakephp?

Question

I’m trying to use Jquery Datatable server-side with Cakephp but I’m not getting it. I am looking for some example for this but not yet found. When running Datatable Jquery returns an error: Uncaught TypeError: Cannot read property 'length' of undefined

How to use Jquery Datatable with Cakephp ?

I’m trying like this.

index.ctp

<script type="text/javascript">

//datatable
$(document).ready(function() {
    $('#dataTables-example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "<?php echo $this->Html->url("/Empresas/indexAjax.json")?>"            
    });   
});

</script>


<div class="row">   
        <div class="col-lg-12">
            <h1 class="page-header">Empresa</h1> 

<!--loading-->
<div class="imageLoading" style="display: none">
    <?php echo $this->Html->image("ajax-loader.gif", array("height"=>"32", "width"=>"32"));?>     
</div>
<!--/loading-->

            <span><?php echo $this->Html->link(__('Novo'), array('action' => 'add')); ?></span>
            <div class="panel panel-default">                
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                            <thead>
                                <th><?php echo $this->Paginator->sort('id'); ?></th>
                                <th><?php echo $this->Paginator->sort('nomeFantasia'); ?></th>                                
                                <th><?php echo $this->Paginator->sort('cnpj'); ?></th>
                                <th><?php echo $this->Paginator->sort('telefone1'); ?></th>
                                <th><?php echo $this->Paginator->sort('telefone2'); ?></th>
                                <th><?php echo $this->Paginator->sort('celular'); ?></th>
                                <th><?php echo $this->Paginator->sort('aberto'); ?></th>

                                <th class="actions"><?php echo __('Actions'); ?></th>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <p>
                            <?php
                            echo $this->Paginator->counter(array(
                                    'format' => __('Página {:page} de {:pages}, exibindo {:current} registro de {:count}, início {:start}, final {:end}')
                            ));
                            ?>  </p>
                            <div class="paging">
                            <?php
                                    echo $this->Paginator->prev('< ' . __(' previous '), array(), null, array('class' => 'prev disabled'));
                                    echo $this->Paginator->numbers(array('separator' => ''));
                                    echo $this->Paginator->next(__(' next ') . ' >', array(), null, array('class' => 'next disabled'));
                            ?>
                    </div>                            
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>
        <!-- /.col-lg-12 -->
    </div>
</div>

controller

public function indexAjax() {       
                $this->autoRender = false;
                $id = $this->Auth->user("id");
                $this->Empresa->recursive = 0;
                $this->paginate = array(
                            'Empresa'=>array('conditions'=>array("users_id = "=> $id))            
                           );
                $empresas = $this->paginate('Empresa');
                //debug($empresas) or die;
        return json_encode($empresas);
    }

Answer 1

Solved.

index.ctp

<script type="text/javascript">
$(document).ready(function() {
    $('#dataTables-example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax":{
            url: "<?php echo $this->Html->url("/Empresas/indexAjax.json");?>",
            dataSrc:""
        },
        "columns": [
            {"data": "Empresa.id"},
            {"data": "Empresa.nomeFantasia"},
            {"data": "Empresa.cnpj"},
            {"data": "Empresa.telefone1"},
            {"data": "Empresa.telefone2"},
            {"data": "Empresa.celular"},
            {"data": "Empresa.aberto"},            
        ]
    });   
});
</script>

controller

public function indexAjax() {       
                $this->autoRender = false;
                $id = $this->Auth->user("id");
                $empresas = $this->Empresa->find('all', array(
                            'fields'=>array("id", "nomeFantasia", "cnpj",
                                    "telefone1", "telefone2", "celular", "aberto"),
                            'Empresa'=>array('conditions'=>array("users_id = "=> $id))            
                           ));
                return json_encode($empresas);

                //
                //debug($empresas) or die;
        //$this->set('_serialize','empresas');
    }