ypnos-web / cakephp-datatables

CakePHP3 Plugin for DataTables plug-in for jQuery
MIT License
27 stars 24 forks source link

Nothing is displayed #5

Closed subhanahmed047 closed 8 years ago

subhanahmed047 commented 8 years ago

Hey I'm glad to see that how active you have been for resolving the problems with this plugin. Here i have an issue, I followed along your quick start guide. Here is my Controller's index method:

public function index() { $nodes = $this->DataTables->find('Nodes', 'all', [ 'contain' => ['Apps', 'Categories'] ]); $this->set('nodes', $nodes); $this->set('_serialize', array_merge($this->viewVars['_serialize'], ['nodes'])); }

Here is my index.ctp:

$options = [ 'ajax' => [ 'url' => $this->Url->build() // current controller, action, params ], 'data' => $nodes, 'deferLoading' => $nodes->count(), // https://datatables.net/reference/option/deferLoading 'columns' => [ [ 'name' => 'Nodes.id', 'data' => 'id', 'visible' => true, 'searchable' => false, ], ], 'order' => [0, 'asc'] // order by username ]; echo $this->DataTables->table('Nodes', $options, ['class' => 'table table-striped']);

In AppController i've also added helpers:

public $helpers = [ 'DataTables' => [ 'className' => 'DataTables.DataTables' ] ];

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

But when i browse to index.ctp, i get nothing, no error, no table nothing is being displayed. I can't figure out what i'm doing wrong, can you please help me figure this out.

Here is my script and CSS in layout: echo $this->Html->script([ 'code.jquery.com/jquery.min.js', '//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/js/dataTables.bootstrap.min.js', 'DataTables.cakephp.dataTables.js', ], ['block' => true]);

$this->Html->css(['https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/css/dataTables.bootstrap.min.css'])

ypnos-web commented 8 years ago

I believe you have to set the ajax.dataSrc option to 'nodes' in your example. See https://datatables.net/reference/option/ajax.dataSrc

So you would set $options = [ 'ajax' => [ 'dataSrc' => 'nodes', 'url' => $this->Url->build() …

subhanahmed047 commented 8 years ago

No setting dataSrc didn't solved my problem.

here is my code:

$options = [ 'ajax' => [ 'dataSrc' => 'nodes', 'url' => $this->Url->build()], 'data' => $nodes, 'deferLoading' => $nodes->count(), // https://datatables.net/reference/option/deferLoading 'columns' => [ [ 'name' => 'Nodes.id', 'data' => 'id', 'visible' => true, 'searchable' => false, ], ], 'order' => [0, 'asc'] ]; echo $this->DataTables->table('Nodes', $options, ['class' => 'table table-striped']);

ypnos-web commented 8 years ago

Did you check the Javascript console in your browser if there are any errors? This sounds like there is a problem on the client side. You can also use the 'view source' feature of your browser to see what is printed by the table() command.

subhanahmed047 commented 8 years ago

Here is the error in console: Uncaught ReferenceError: initDataTables is not defined

Here is my view source:


<table class="dataTable table table-striped" id="Nodes"></table><script>
//<![CDATA[
initDataTables('#Nodes', {"searching":true,"processing":true,"serverSide":true,"deferRender":true,"className":"DataTables.DataTables","language":{"emptyTable":"No data available in table","info":"Showing _START_ to _END_ of _TOTAL_ entries","infoEmpty":"No entries to show","infoFiltered":"(filtered from _MAX_ total entries)","lengthMenu":"Show _MENU_ entries","processing":"Processing...","search":"Search:","zeroRecords":"No matching records found","paginate":{"first":"First","last":"Last","next":"Next","previous":"Previous"},"aria":{"sortAscending":": activate to sort column ascending","sortDescending":": activate to sort column descending"}},"ajax":{"dataSrc":"nodes","url":"\/cp3workspace\/shopengine\/nodes"},"data":[{"id":1,"apps_id":1,"categories_id":2,"title":"Civic 2016 for sale","quantity":"1","status":1,"price":"2400000","thumb":null,"image":"","created":"2016-03-13T14:49:06+0000","modified":"2016-03-13T14:49:06+0000","first_name":null,"middle_name":null,"category":{"id":2,"name":"Honda","parent_id":1,"lft":2,"rght":3},"app":{"id":1,"title":"Shop","created":"2016-03-13T14:46:56+0000"}}],"deferLoading":1,"columns":[{"name":"Nodes.id","data":"id","visible":true,"searchable":false}],"order":[0,"asc"]});

//]]>
</script>  
ypnos-web commented 8 years ago

I think you have an error in your script block, it reads

'//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js',

so I guess the protocol part of the URL is missing.

ypnos-web commented 8 years ago

Could you solve your issue?