how to disable sorting click event on table header - Select2

how to disable sorting click event on table header - Select2

BryanSBryanS Posts: 3Questions: 2Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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

  • BryanSBryanS Posts: 3Questions: 2Answers: 0

    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 :)

Sign In or Register to comment.