after dropdown added to column header, select one by default

after dropdown added to column header, select one by default

chris.cavagechris.cavage Posts: 46Questions: 12Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,327Questions: 26Answers: 4,949
    Answer ✓

    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.cavagechris.cavage Posts: 46Questions: 12Answers: 0

    Thank you!

This discussion has been closed.