Isolate columns

tresv93

I am working on a rather simple table, it's all HTML really and basic functions like sorting.

I have multiple columns and have set dropdowns to two of them however, they retain the sorting function and I have no idea how to isolate them or alternatively, how to target the rest of the columns in order to make them sortable.

Link to JSfiddle in case it's easier to work with: https://jsfiddle.net/c3tn0ae7/

<script type="text/javascript">
        $(document).ready(function() {
            $('#example').DataTable( {
                initComplete: function () {
                    this.api().columns([5, 11]).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>' )
                        } );
                        
                    } );
                }
            } );
        } );
    </script>

colin

they retain the sorting function and I have no idea how to isolate them

Sorry, I don't understand that. Could give more details/examples, please.

or alternatively, how to target the rest of the columns in order to make them sortable.

Your code is only looking at those two columns explicitly:

                    this.api().columns([5, 11]).every( function () {

so to extend to all columns, just drop the array ([5, 11]), as by default columns() returns all columns.

Colin

tresv93

Thank you for your quick reply, Colin!
I have total of 12 columns. I want columns 5 and 11 to have a dropdown - this is achieved with the current code. However, they still have the sorting button, so when I click on the dropdown to pick an option from it, the column gets sorted asc or desc. My aim is to remove that button and keep only the dropdown, while the rest of the columns (0, 1, 2, 3, 4, 6, 7, 8, 9, 10) keep the sorting button.

I hope I have managed to explain this better.

kthorngren

You will need to move the sorting event listeners to a different header row. This can be controlled with orderCellsTop. See the example in this thread.

Kevin

tresv93

Hi Kevin, I did try the method you suggested however, then the dropdowns aren't displaying the options from the columns they are in.

I tried targeting specific coulmn here var column = api.column(i); however I can target only 1 column, rather than multiple

kthorngren

Did you update your test case with what you tried so we can help?

Kevin

tresv93

Hi Kevin, yes, you can find it here https://jsfiddle.net/vqywnux7/1/

You can see that the dropdown on column 5 displays data from column 0 and column 11 displays data from column 2.

kthorngren

Right, that example needs some adjustment. Take a look at this example from this thread. It loops through all the columns but only applies the search function to the columns with the class filterhead.

Kevin

tresv93

I am afraid I wasn't able to implement this to my table.
Here's how the table should look http://live.datatables.net/dipusute/1/

Is it possible to remove the sorting icons / disable asc/dsc sorting on the columns with the "filterhead" class and keep the lists?

kthorngren

There are a couple issues. You need to have /orderCellsTop: true, inside the Datatables initialization code - if you want to use it. I commented it out since the location of the statement causes errors.

You can use column.orderable to turn off sorting on certain columns. You can use columnDefs for this with a columnDefs.targets specifying the class filterhead.

Your header doesn't look like proper HTML. Looks like its missing a tr tag for the third row. I updated your example to use the class instead of specific columns to create the search inputs. To do this I added an offset to the loop index to skip the first three columns (rowspan=4) defined in the first header row. You can use either option you wish.

Here is the updated example:
http://live.datatables.net/bugesibi/1/edit

Kevin