Setting a Select/Option Value on Load

kraftomatic

Hi All,

I'm struggling to get the correct reference to set the filter/dropdown in this example:
http://live.datatables.net/yohuluco/5/edit

Rather than "Show All" showing/filtering by default, I want to simply set that to the "Men Open" value. This is the code of focus:

        // init filter/dropdown for rider class
        initComplete: function () {
            this.api().button(1).enable();
            this.api().button(0).disable();

            this.api().columns([3]).every( function () {  // columns[0] sets the filter dropdown to only the rider type
                var column = this;
                var select = $('<select class="form-control input-sm"><option value="">Show All</option></select>').appendTo( ".toolbar" )

                .on( 'change', function () {
            var val = $.fn.dataTable.util.escapeRegex($(this).val()); 
                    column.search( val ? '^'+val+'$' : '', true, false ).draw();
                } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
        } );
            } );
        }
    } )

Thank you.

kraftomatic

Update - this if/else check sort of handles the dropdown being set correctly, but it doesn't then filter/update the view of the data at all.

column.data().unique().sort().each( function ( d, j ) {
                    //select.append( '<option value="'+d+'">'+d+'</option>' )
                    if ( d == 'Men Sport' ) {
                        select.append( '<option value="'+d+'" selected>'+d+'</option>' )
                    }
                    else {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    }
        } );

I know this isn't the proper/most eloquent solution either. I feel there's a clean way to do this I'm missing.

Thanks.

colin

On your test case in your OP it appears to be filtering. Could you give steps on how to reproduce, please,

Colin

kraftomatic

Hey Colin - apologies, let me clarify. When the page/table loads, the table view is set to "Show All'. I would like that initial load/display to be set to the "Men Sport" category/value within the dropdown.

Thanks,
Ed

kthorngren

One way is to use jQuery to select the option, like this:

$("#col3").val("Men Sport").change();

See the updated example:
http://live.datatables.net/yohuluco/7/edit

Add the id col3 to the select and placed the statement after the options are built.

Kevin

kraftomatic

Brilliant. Thanks Kevin.