How to display Select Input default value?

pcady · October 2017

Using serverSide: true, I set a default search on Column 1 with a val='false':

               "searchCols": [
                    null,
                    {"search": 'false'},
                    null ]

This works ok and the initial filtered data is returned. However, initComplete (where the filters are setup) executes after the initial serverSide call. Column 1 filter definition in initComplete is:

                    api.columns([1]).every( function () {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $(column.footer()).empty() )
                            .append( '<option value="true">Active</option>' )
                            .append( '<option value="false">Archived</option>' )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                column.search( val).draw(true);
                            } );
                    } );

The filter works correctly but the Select Input dropdown does not show the initial search value of 'Archived' (false). How do I get it to display the default search value?

I thought I should be able to do something like this in initComplete after the filter is created:
$('#users-table').DataTable().columns([1]).search('true');
without the Draw so as to not trigger another serverside call but this doesn't work.

Any ideas would be greatly appreciated. Thanks

pcady · October 2017

I'll answer my own question:

select.val('false').attr('selected', 'selected');

Thanks!

saikalyan9981 · June 2018

But this is helpful only when you want to set one default column, how multiple can be set? and also this is distorting the table.

How to display Select Input default value?

How to display Select Input default value?

Answers