Adding Select Dropdown For Edatatable

Hoping someone could help me here…as I’ve been struggling for sometime.sigh

So long story short is I have a page using the EDataTables( "–www.yiiframework.com/extension/edatatables/–" ) which is the Yii extension for the JQuery data table: "–www.datatables.net/–" . My table works and looks great, but my problem is manipulating ANYTHING after the widget gets created.

All I want is to ‘imitate’ the ‘search’ functionality currently there with my custom html select box(or intergrated/created from table widget). Typically I want to display data in the table based on what ‘billing date’ you select in the dropdown. I technically have 2 dropdowns, but I just want the one to work for now. The billing_date field is also in the same table as all the others…no joins.

Once again, any jquery I use to add features or change them…just DOES NOT WANT TO WORK! >:(

i.e /* var table = $(’#DataTables_Table_0’).DataTable();

$("#DataTables_Table_0 tfoot th").each( function ( i ) {


    var select = $('<select><option value=""></option></select>')


        .appendTo( $(this).empty() )


        .on( 'change', function () {


            table.column( i )


                .search( $(this).val() )


                .draw();


        } );





    table.column( i ).data().unique().sort().each( function ( d, j ) {


        select.append( '<option value="'+d+'">'+d+'</option>' )


    } );


} );

*/

So I’ve attached my image of what it looks like to give a clearer understanding. But in a nutshell, I want something like this: “–www.datatables.net/release-datatables/examples/api/multi_filter_select.html–” .

I want a dropdown with all billing dates as options in my table, so I can filter them with the selected option. This will naturally update the table.

My Current setup:

Monthend.php - model

MainController.php - controller

index.php - view

billing.js - within view loaded as: Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.’/js/billing.js’,CClientScript::POS_END); above where widget is initialized in view. – $widget->run();

If anyone can assist me with this, I will be really grateful!

Regards,

Kyle Ross

*Forgot…this is my widget creation code. Seems to be the only way to add features as JS doesn’t work!

/* $widget = $this->createWidget(‘ext.EDataTables.EDataTables’, array(

                'id' => 'monthendtable',


                'dataProvider' => $model->search($columns),


                'ajaxUrl' => $this->createUrl($this->getAction()->getId()),


                'columns' => $columns,


                'itemsCssClass'=>'table table-bordered table-condensed table-hover table-striped dataTable',


                //'htmlOptions'=>array('style'=>'text-align: center'),


                //'filter'=>$model,


                'buttons' => array(


                    'export' => array(


                        'label' => Yii::t('app','Save as CSV'),


                        'text' => false,


                        'htmlClass' => '',


                        'icon' => Yii::app()->theme!==null&&Yii::app()->theme->name=='bootstrap' ? 'icon-download-alt' : 'ui-icon-disk',


                        'url' => $this->createUrl('export'),


                    ),


                    'print' => array(


                        'label' => Yii::t('app','Print'),


                        'text' => false,


                        'htmlClass' => '',


                        'icon' => Yii::app()->theme!==null&&Yii::app()->theme->name=='bootstrap' ? 'icon-print' : 'ui-icon-print',


                        'url' => $this->createUrl('LoadMonthend', array('print'=>true)),


                    ),


                  ),  


            ));


            if (Yii::app()->getRequest()->getIsAjaxRequest()) {


                echo json_encode($widget->getFormattedData(intval($_GET['sEcho'])));


                Yii::app()->end();


                return;


            }





                  $this->render('index', array(


                        'widget' => $widget, 


                        'model' => $model, 


                        'columns' => $columns,


                        'result' => $result, 


                        'billing_dropdown' => $billing_dropdown,


                        'version_dropdown' => $versions_dropdown,


                    ));

*/

Hello, I want to make a same functionality in eDataTables.

My code is:




//controller

$widget = $this->createWidget('ext.EDataTables.EDataTables', array(

            'id'            => 'vpds',

            'dataProvider'  => $dataProvider,

            'ajaxUrl'       => Yii::app()->getBaseUrl().'/vpd',

            'columns'       => $columns,

        ));


//view

$widget->run();


Yii::app()->clientScript->registerScript('efooter', "

    var table = $.fn.eDataTables.tables['vpds'];

    $('#DataTables_Table_0 tfoot td').each( function ( i ) {

        var select = $('<select><option value=\"\"></option><option value=\"1\">1</option></select>')

        .appendTo( $(this).empty() )

        .on( 'change', function () {

            table.column( i )

            .search( $(this).val() )

            .draw();

        } );

    } );

");



I’ll attach an image about the error in JS.

5726

Screen shot 2014-07-04 at 12.11.10 PM.png

Please help me with this.

Hi,

Have you got any solution? I would also like to add column filter in edatatables, but unfortunately not found any solutions. Please share with us if you found same.

Thanks,

Mayur

Hello, unfortunately doesn’t found a solution. I am using a CGridView now.