Isolate columns
Isolate columns
tresv93
Posts: 5Questions: 1Answers: 0
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>
This discussion has been closed.
Answers
Sorry, I don't understand that. Could give more details/examples, please.
Your code is only looking at those two columns explicitly:
so to extend to all columns, just drop the array (
[5, 11]), as by defaultcolumns()returns all columns.Colin
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.
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
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
Did you update your test case with what you tried so we can help?
Kevin
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.
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
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?
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.orderableto turn off sorting on certain columns. You can usecolumnDefsfor this with acolumnDefs.targetsspecifying the classfilterhead.Your header doesn't look like proper HTML. Looks like its missing a
trtag 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