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