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

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

taouiltaouil Posts: 3Questions: 1Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • taouiltaouil Posts: 3Questions: 1Answers: 0
    edited October 2021

    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();
    
  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

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

    Kevin

  • taouiltaouil Posts: 3Questions: 1Answers: 0

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

Sign In or Register to comment.