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( "––" ) which is the Yii extension for the JQuery data table: "––" . 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() )


        } );

    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: “––” .

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!


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'),


                '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'])));




                  $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:


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

            'id'            => 'vpds',

            'dataProvider'  => $dataProvider,

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

            'columns'       => $columns,




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() )


        } );

    } );


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


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

Please help me with this.


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.



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