How to keep the order in select filter the same as table?

taouil

Hello,
I have been using datatables for a while now,
Lately, I implemented the select filter function (Select2 with multiple select) to filter the result on the table,
I generate the result on a table using JSON, the data is already sorted (No sorting on the table),
When using the filter, the result on the filter is not in the same order as the table,

Example on the table:
Floor 1
Floor 2
Floor 3
....
Floor 10
Floor 11

On the select:
Floor 1
Floor 10
Floor 11
....

Is there a simple way to make the result on the filter in the same sort as of the table?
By the way, I have multiple filters, and the results are dynamic (Number, Characters...), I would like a general solution to correct this.

Thank you.

taouil

This is the JS code I use for the filter:

this.api().columns([6]).every( function () {
                        var column = this;
                        var select = $('<select class="form-select form-select-solid" data-dropdown-parent="#FilterMenu" id="filter_floor"><option value=""></option></select>')
                            .appendTo( '#filter_3' )
                            .on( 'change', function () {
                                var data = $.map( $(this).select2('data'), function( value, key ) {
                                    return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;
                                            });
                                if (data.length === 0) {
                                    data = [""];
                                }
                                var val = data.join('|');
                                column
                                        .search( val ? val : '', true, false )
                                        .draw();
                            } );

                        column.data().unique().sort().each( function ( d, j ) {
                            var val = $('<div/>').html(d).text();
                            select.append( '<option value="' + val + '">' + val + '</option>' );
                        } );
                    } );
                    $('#filter_floor').select2({
                        placeholder: "Select a floor",
                        allowClear: true,
                        multiple: true,
                        dropdownParent: $("#FilterMenu")
                    });
                    $('#filter_floor').val(null).trigger('change');
                    $('#filter_floor').attr('multiple', 'multiple');
                    $("#filter_floor" + " option")[0].remove();

kthorngren

Try removing .sort() from line 18 of your above code snippet.

Kevin

taouil

@kthorngren Thank you for the answer, it's working perfectly.