how to disable sorting click event on table header - Select2
how to disable sorting click event on table header - Select2
BryanS
Posts: 3Questions: 2Answers: 0
Basically the same issue as here, but with Select2 dropdowns
The solution to add e.stopPropatation() works fine on a standard select, but doesn't work once changing it to Select2
What should I do to prevent sorting when the dropdown is clicked?
initComplete: function () {
this.api().columns(".canFilter").every(function () {
var column = this;
var select = $('<select class="select2" ><option value=""></option></select>')
.appendTo($(column.header()))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
}).on('click', function (e) { e.preventDefault(); e.stopPropagation(); }); <---neither works if select2
column.data().unique().sort().each(function (d, j) {
if (d!='')
select.append('<option value="' + d + '">' + d + '</option>')
});
$('.select2').select2(
{
dropdownAutoWidth: true,
minimumResultsForSearch: Infinity,
});
});
},
This question has an accepted answers - jump to answer
Answers
Maybe the tips in the SO thread will help.
Another option is to use two header rows; one for sorting and the other for the search inputs. Like this example:
http://live.datatables.net/jetupuda/1/edit
If you still need help please provide a test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
I'd already looked at the SO thread and no joy.
I went for the two header rows in the end, which actually looks better anyway. I had to mess about with the example, as we don't filter on all columns, so couldn't use the index, but eventually worked out how to get the column from the header iterator.
Just need to work out how to fix dropdown widths now