how to disable sorting click event on table header - Select2

BryanS

Basically the same issue as here, but with Select2 dropdowns

https://datatables.net/forums/discussion/27035/how-to-disable-sorting-click-event-on-table-header-children

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,
                            });
                    });
                },

kthorngren

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

BryanS

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