SORT problem

kkdoxy

I have a datable..But I have a problem.
I have the code below.

When I ordered the dropdowns (see image): Line code
column.order('asc').draw(false).data().unique().each( function ( d, j ) {

The list of images in the table becomes unordered.
For the table to be sorted, I have to delete this order('asc') from the code.
But I need this to sort the dropdowns.

Can you help me sort the table again?

CODE

      `var table = $('#tableModel').dataTable({
            "initComplete": function (settings, json) {
                var orderInit = this.api().order();
                this.api().columns([1, 2,3,4,5,6,7]).every( function (index) {
                    var column = this;
                    var select =  $('<select class="selectpicker"><option value="">All</option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );

                    var r = $('#tableModel tfoot tr');
                    r.find('th').each(function(){
                        $(this).css('padding', 8);
                    });

                    $('#tableModel thead').append(r);
                    $('#search_0').css('text-align', 'center');
                    // NOTE: Temporarily sort the column data before retrieving it
                    // with data() function.
                     column.order('asc').draw(false).data().unique().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );**
                } );


            },
            "pageLength": 100,
            "responsive": true,
            "destroy": true,
            "bprocessing": true,
            "bserverSide": true,
            "sAjaxSource": "assets/scripts/getAjax.php",
            "sServerMethod": "POST",
            "pagingType": "simple_numbers",
            "dom": '<"top"fl<"clear">>rt<"bottom"ip<"clear">>',
            "aaSorting": [[0, "desc"]],
            "oLanguage": {
                "sSearch": "Search",
                "sEmptyTable": "No data to display",
                "sInfo": "Showing _START_ to _END_ entries (Total: _TOTAL_)",
                "sLengthMenu": "Show _MENU_ entries",
                "sInfoFiltered": "Filtering _MAX_ entries",
                "sLoadingRecords": "Please wait - loading...",
                "sProcessing": "Processing...",
                "oPaginate": {
                    "sFirst": "First",
                    "sLast": "Last",
                    "sPrevious": "Previous",
                    "sNext": "Next"
                }
            },
            "aoColumns": [
                {"mDataProp": "Image", "bSortable": false, "bVisible": true},
                {"mDataProp": "option1", "bSortable": true, "bVisible": true},
                {"mDataProp": "option2", "bSortable": true, "bVisible": true},
                {"mDataProp": "Age", "bSortable": true, "bVisible": true},
                {"mDataProp": "option4", "bSortable": true, "bVisible": true},
                {"mDataProp": "option5", "bSortable": true, "bVisible": true},
                {"mDataProp": "option6", "bSortable": true, "bVisible": true},
                {"mDataProp": "option7", "bSortable": true, "bVisible": true},
                {"mDataProp": "Edit", "bSortable": false, "bVisible": true},
                {"mDataProp": "Id", "bSortable": true, "bVisible": false}
            ],
            "aoColumnDefs": [

                {"bSortable": true, "aTargets": [0]},
                {
                    "aTargets": [0],
                    "mRender": function (data, type, full) {



                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' +
                            '<a class="gallery-item" href=""  data-gallery>' +
                            '<img src="' + pathThumbnail + '" alt="' + data + '"/></a></div>';
                    }
                },
                {"bSortable": true, "aTargets": [1]},
                {
                    "aTargets": [1],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [2]},
                {
                    "aTargets": [2],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [3]},
                {
                    "aTargets": [3],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [4]},
                {
                    "aTargets": [4],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [5]},
                {
                    "aTargets": [5],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [6]},
                {
                    "aTargets": [6],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [7]},
                {
                    "aTargets": [7],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },

`

kkdoxy

Can someone help me please?

allan

Happy to take a look if you can post a link to a test case please.

Allan

kkdoxy

Hi Allan,

thanks for your comment

For example:
https://jsfiddle.net/43u2wno4/6/

As you can see the age is orderly, but the table is unordered.

allan

The table is being ordered by the "Salary" column when I open that page. I'm not quite clear what the issue is I'm afraid.

Allan

kkdoxy

Hi Allan,
It is sorting all the dropdowns.
But I need to also sort the first column of the table.

kthorngren

I put the first column as the last processed in this line:
this.api().columns([1,2,3,4,5,0]).every( function ()

Now the first column is sorted. Is this what you are looking for?
Updated fiddle: https://jsfiddle.net/43u2wno4/7/

Kevin

allan

Oh - I see. Its because you are calling the column().order() method. I can see why you've done that to get the data in the same order as DataTables shows it instead of using sort(), but it does mean that your table will be sorted.

Kevin's workaround is a really clever way of approach that.

Allan