after dropdown added to column header, select one by default

chris.cavage

I am adding a dropdown menu dynamially to the fourth column in fnInitComplete so users can filter easier like this:

 "fnInitComplete": function(settings, json) {

           this.api().columns(3).every(function () {
           var column = this;
        var select = $('<select class="form-control"><option value=""></option></select>')
            .appendTo($(column.header()))
            .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>')
        });
    });
 }});   

The column that has the dropdown menu only has options of Yes or No.

Once it's loaded, how can I select the menu item of 'Yes' by default?

kthorngren

You can use jQuery to change the select val() with .change() to invoke the event handler. The event handler will then perform the search. Something like this:

      var col3 = this.api().column(3).header()      
      $(col3).find('select').val('Yes').change();

Here is an example using your code:
http://live.datatables.net/sodaqeva/1/edit

Kevin

chris.cavage

Thank you!