Skip to content

Implementation issue #5

Closed
Saanch opened this Issue Apr 19, 2012 · 25 comments

4 participants

@Saanch
Saanch commented Apr 19, 2012

Can you please explain in simple terms with an example, how can I implement this plugin.
I tried to do exactly you have mentioned in the readme doc but not able to render the result. As I am a newbie I am not familiar in this i may be wrong some where. Please help me to implement this.

@tigrang
Owner
tigrang commented Apr 19, 2012

Which method did you use to install the plugin?
Did you make sure to enable the plugin in Config/bootstrap.php?
What have you implemented so far?
Are you getting any error message?

This code is still new and is changing and what you are experiencing may just be a bug. I have not had time to finish this plugin - although, it should be working.

Bin relevant code and I'll try to help.

@Saanch
Saanch commented Apr 19, 2012

Hi tigrang, Thanks for your reply.

I have done the following.
Updated the config/bootstrap.php with CakePlugin::load('DataTable');
Copied the directory to app/plugin and rename it to DataTable
So the app/plugin/DataTable directory now contains Controller, Model, Test and the View Directory corresponding to the plugin.
I have updated the user controller with the code you have mentioned.adding component and Helper.

Remaining I am not clear. You have mentioned to add a new file inside View/[ModelName]/datatable action_name.ctp
this part i am not clear and also I am not sure How can I render this in the view.

Do I need to do anything else in the controller action function to render with this plugin?

Please help me

@olivierto

Hello!
same thing for me!
I think the documentation isn't clear enought!
How do we call helper method to display our table?
btw if this plugin works it will save me a lot of time! thx!

@tigrang
Owner
tigrang commented Apr 19, 2012

So if your datatable resides in the Users/index action you will need an app/View/User/datatable/index.ctp. This is used to return json response to jquery lib

Inside this file there is a view var set called $dtResults which contains the paginated/filtered model data. The View Class used is DataTableResponse for datatable views. This View has a field called $this->dtResponse which holds aaData, iTotalRecords, iTotalDisplayedRecords, etc. You can find more info on that here: http://datatables.net/usage/server-side

So what you have to do in this view is build $this->dtResponse['aaData'] with the $dtResults. Then the View class automatically outputs the data as json.

An example would be:

<?php
foreach($dtResults as $result) {
    $this->dtResponse['aaData'][] = array(
        $result['User']['id'],
        $result['User']['username'],
        $result['User']['email'],
        'actions',
    );
}

Next you need make your table manually (at least for now, the Helper is not complete).

So something like this in your app/Views/User/index.ctp

<table id="example"><thead>put your headers here</thead><tbody></tbody></table>

and you need to add jquery script and the datatable script manually and another script to initiate it via:

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "/users/index"
    } );
} );

By default the component is set to "trigger" if the request is an ajax one. You can customize this setting by the trigger setting. If its set to true it will use the default, if its a string, it will look for that method in the controller where you can check with your custom check (for ex. checking if its an ajax request and that it has an extension of .json). This method should return a boolean.

The default trigger check also works with the triggerAction option to tell the component which actions have datatables. It can be an array, a single string, or '*' wildcard for all actions. By default its just index.

If trigger is set to false, then you can manually call $this->DataTable->process(); in the action.

If the process of setting it all up is messy and you can think of a better way, please let me know.

Hope that helps @Saanch and @olivierto

@Saanch
Saanch commented Apr 20, 2012

Its Rocking!!!!!
Thank you tigrang & shama...
Its working now for me. But still there are some issues.
in the datatable i used "sPaginationType": "full_numbers",
but the pagination is showing like Showing 1 to 0 of NaN entries (filtered from NaN total entries)
Sorting, filtering all working fine. Please guide me on this also.

Once again thanks for the Support and making this Wonderful plugin.

@tigrang
Owner
tigrang commented Apr 20, 2012

@Saanch I'll get back to you on that.

@tigrang
Owner
tigrang commented Apr 20, 2012

@Saanch which version of cake are you using?

@Saanch
Saanch commented Apr 20, 2012

I am using CakePHP V 2.1.1

@tigrang
Owner
tigrang commented Apr 20, 2012

That should be working then. Can you post your app/View/Model/datatable/action.ctp file and your controller code?

@tigrang
Owner
tigrang commented Apr 20, 2012

If you have FireBug in firefox look at the json being returned and post that up, too, if you can.

@Saanch
Saanch commented Apr 20, 2012

app/View/ServiceSvcs/datatable/index.ctp

<?php
foreach($dtResults as $result) {
    //debug($result);
    $this->dtResponse['aaData'][] = array(
        $result['ServiceSvc']['svc_id'],
        $result['ServiceSvc']['svc_name'],
        $result['ServiceSvc']['svc_quntity'],
        $result['ServiceSvc']['svc_usage_time_minute'],
        $result['ServiceSvc']['svc_usage_charge'],
        $result['ServiceSvc']['svc_description'],
        $result['ServiceSvc']['svc_peanlity_payment'],
        'actions',
    );
} ?>

Controller

<?php
App::uses('AppController', 'Controller');
/**
 * ServiceSvcs Controller
 *
 * @property ServiceSvc $ServiceSvc
 */
class ServiceSvcsController extends AppController {

    public $components = array(
        'DataTable.DataTable' => array(
            'columns' => array(
                'svc_id' => 'svc_id',                      
                'svc_name' => 'svc_name',               
                'svc_quntity' => 'svc_quntity',
                'svc_usage_time_minute' => 'svc_usage_time_minute',
                'svc_usage_charge' => 'svc_usage_charge',
                'svc_description' => 'svc_description',
                'svc_peanlity_payment' => 'svc_peanlity_payment',
                'Actions' => null,                  
            ),
        ),
    );

/**
 * Helpers
 *
 * @var array
 */
    public $helpers = array(
        'DataTable.DataTable',
    );
/**
 * index method
 *
 * @return void
 */
    public function index() {
        $this->ServiceSvc->recursive = 0;
        $this->set('serviceSvcs', $this->paginate());
    }

Script used in the app/View/ServiceSvcs/index.ctp file

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#example1').dataTable( {
        "sPaginationType": "full_numbers",
        "bProcessing": false,
        "bServerSide": true,
        "sAjaxSource": src="ServiceSvcs/index",
    });
});
</script>

table id used is example1

JSON Response
{"iTotalRecords":false,"iTotalDisplayRecords":false,"sEcho":1,"aaData":[["1","chairrent","100","120","1500","","500","actions"],["2","preist","1","60","200","NULL","50","actions"],["3","kitchen","1","120","1000","","50","actions"],["4","Priest Service","1","30","50","Priest service for pooja","50","actions"],["5","Cleaning","1","60","100","Cleaning of the Function Hall","50","actions"],["6","Cleaning Service","1","30","50","Cleaning Kitchen Area","300","actions"]]}

@tigrang
Owner
tigrang commented Apr 20, 2012

I remember there was an issue with cake version prior to 2.2 (which is why I update the readme to say 2.2 and up). But I am trying 2.1.1 right now and its working for me. I dont know what to say. I'll try to reproduce it.

@tigrang
Owner
tigrang commented Apr 20, 2012

@shama Thanks for providing an example. Have you experienced what Saanch is describing?

@shama
shama commented Apr 20, 2012

I think it's issue #4 where find('count') doesn't like fields in the query. His iTotalRecords is set to false which gives the NaN. I could re-open if you wanted to merge it.

@Saanch
Saanch commented Apr 20, 2012

@tigrang I have updated the cakephp to 2.2 version and its working fine. I think there is some issue with 2.1.1 version for using this plugin.

Thanks a lot for your help and timely responses, I really appreciate that. :)

@tigrang
Owner
tigrang commented Apr 20, 2012

Yes, please.

Wonder why I cant reproduce it anymore.

@tigrang
Owner
tigrang commented Apr 20, 2012

I just reproduced it haha

@tigrang
Owner
tigrang commented Apr 20, 2012

Np @Saanch

I'll be fixing it for 2.0-2.1 soon ( and by "I" I mean @shama ;] )

@Saanch
Saanch commented Apr 20, 2012

@tigrang @shama Thanks for that update. I have updated the readme also. please review.

@shama
shama commented Apr 20, 2012
@tigrang tigrang closed this Apr 20, 2012
@olivierto

Thanks for your help !
working like charm!!

@olivierto

I'm trying to use data filter with select inputs. I don't get it work. Any idea on how to do so?

@tigrang
Owner
tigrang commented Apr 20, 2012

What exactly does that do? Can you link me to an example? Its probably best if you start a new issue for this. Thanks.

@olivierto

in fact i'm trying to use DataTables individual column filtering http://datatables.net/release-datatables/examples/api/multi_filter_select.html i'm starting new issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.