How can I update the select 2 filter outside the data table?
How can I update the select 2 filter outside the data table?
NkNoctafly
Posts: 10Questions: 5Answers: 0
Description of problem: Hello ,I'm trying to update the filters depending on the selection, but I still can't do it,Filters already work but are not updated depending on the selection
initComplete: function () {
this.api().columns([1, 2, 3, 4, 5, 6]).every(function () {
var Destino = '#prueba'
var column = this;
var select = $('<select class="Filtros select2 col-md-1" style="width:15%"><option value="">Seleccionar Todas</option></select> <script>$(".Filtros").select2({allowClear: true,theme: "classic",dropddownAutoWidth: false,placeholder: "Selecciona"});</script>')
.appendTo(Destino)
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
});
tablaGeneral.on('draw', function () {
tablaGeneral.columns([1, 2, 3, 4, 5, 6]).indexes().each(function (idx) {
var Destino = $("#prueba");
var column = this;
var select = $(tablaGeneral.column(idx)).find('select');
if (select.val() === '') {
select
.empty()
.append('<option value=""/>');
tablaGeneral.column(idx, {
search: 'applied'
}).data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
}
});
});
},
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has an accepted answers - jump to answer
Answers
I think this thread is asking the same question. See if it helps.
Kevin
The problem is that I don't need this inside datatable
it only recognizes the header and footer but not another place for filtering
The idea is that the
createDropdowns()function is run each time the search takes place so it can update the dropdown lists. It doesn't matter where they are located on the page. Just change the selectors used to those you are currently using. If you need help with this please build a test case with what you have so we can provide more specific help.https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
http://live.datatables.net/wajehari/1/edit
This is the test cso
There were several errors in the script - for example only 6 columns, not 7, and a few others. The problem is that you're trying to get the value of the
selectthat's on the column, but it's not in the column, it on thepruebaelement - so you need to get theselectelement from there. I've marked that in the code here, hopefully that'll get you going,Colin
Do you have an example using select2 multiselect component?
Is this with Editor? Or filtering? There are a few threads on each, such as here and here,
Colin