Techiio-author
Started by Dixon MurrayNov 5, 2021

Open
DataTables filters column when clicking on select inside Header

0 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWES SHARE

I have a Data Tables instance that appends a pick inside the header of a desk.

Here is the relevant part of the code that adds the select to the header

initComplete: function () {
            count = 0;
            this.api().columns().every(function () {
                var title = this.header();
                //replace spaces with dashes
                title = $(title).html().replace(/[\W]/g, '-');
                var column = this;
                var select = $('<br><select id="' + title + '" class="select2" ></select>')
                    .appendTo($(column.header()))
                    .on('change', function () {
                        //Get the "text" property from each selected data
                        //regex escape the value and store in array
                        var data = $.map($(this).select2('data'), function (value, key) {
                            return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;
                        });
                        //if no data selected use ""
                        if (data.length === 0) {
                            data = [""];
                        }
                        //join array into string with regex or (|)
                        var val = data.join('|');
                        //search for the option(s) selected
                        column
                            .search(val ? val : '', true, false)
                            .draw();
                    });
                //unique, tipo group by 
                //sorte deixa em ordem abcd
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                });
                //use column title as selector and placeholder
                $('#' + title).select2({
                    multiple: true,
                    closeOnSelect: false,
                    placeholder: "Select a " + title
                });
                //initially clear select otherwise first option is selected
                $('.select2').val(null).trigger('change');
            });
}

However, I observed that one disadvantage of setting it inside the header is that after I click into the choose, data tables think I am sorting through that column. Is there a manner to now not type the column if I am clicking within the pick (which has an identity equal to the column call)

0 Replies

You must be Logged in to reply
Trending Technologies
15
Software91
DevOps48
Frontend Development24
Backend Development20
Server Administration17
Linux Administration28
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance