How to select the desire columns to sort

emfpc

Greetins,

Was able to do a sort from the header in the table but will like to know how to determined what columns to use; i do not want to use all the columns for the sort.

JsFiddle File:
https://jsfiddle.net/trkq6hc3/

dataTable Code (Javascript):

$(document).ready(function() {
            $('.mydatatable').DataTable( {
                ordering:false,
                //
                initComplete:function(){
                    this.api().columns().every(function(){
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo($(column.header()).empty() )
                            .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>');
                        });

         
                    });
                }
                
            });
});

kthorngren

Use the order option to set the initial table order. You can use the order() API to change the order after initialization. Does this answer your questions?

Kevin

emfpc

@kthorngren will check if this help, but i want to remove, in some columns, the select field that is created by the code.

kthorngren

i want to remove, in some columns, the select field that is created by the code.

This thread is asking the asme question.

Kevin

emfpc

Thanks you @kthorngren

emfpc

my apologies to contact you again @kthorngren , if there a way i can have the original tittle in the header?

kthorngren

This example shows how to have two headers in the table.
http://live.datatables.net/saqozowe/2/edit

Note the use of orderCellsTop to move the sorting function to the top row. Is this what you are looking for?

Kevin

emfpc

@kthorngren it is what i am looking for but i do not know why it won't work on my side.

kthorngren

Can you provide a link to your page or a test case replicating the issue? This way we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Maybe you can describe what is not working?

Kevin

emfpc

Got it running @kthorngren ?, thanks a lot ??‍♀️.

emfpc

@kthorngren your solution provided actually help. now i was ask to make the original title appear inside the sort select field.

initComplete:function(){
                this.api().columns([2,3,6]).every(function(){
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo($(".mydatatable thead tr:eq(0) th").eq(column.index()).empty() )
                        .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>');
                    });
                });
            },

I try calling a different label for each column tittle and if y try to run a array inside the initcomplete the whole table won't work

//Want to display the tittle of the columns here
var select = $('<select><option value="">//title of the columns</option></select>')

kthorngren

I think you will want to set a placeholder. See if this SO thread helps.

Kevin

kthorngren

Additionally you can use column().header() to the the column title, see the example.

Kevin

emfpc

Thanks. I was able to accomplish what i was looking for . How can i make a example / live code so that other can see it. @kthorngren

kthorngren

You can update my example or create a new one using http://live.datatables.net.

Kevin

emfpc

It won't let me save it
@kthorngren

kthorngren

It automatically saves. But you may need to use File > Clone first.

Kevin

emfpc

http://live.datatables.net/vuvujosu/1/edit
Using one header