Header Columns dropdownlist: reload options on change

Giulo

Hi,

I've an header that columns have a dropdownlist loaded with unique column values.
Currently I create them in the initComplete, my example:

        initComplete: function () {
            var prog = 0;
            this.api().columns([2,3,4,5]).every(function () {
                var column = this;
                if (column[0] == 2) {var val = 'Numero';}
                if (column[0] == 3) {var val = 'Azienda';}
                if (column[0] == 4) {var val = 'Stato';}    
                if (column[0] == 5) {var val = 'Referente';}
                prog++;
                var select = $('<select id="resizing_select' + prog + '" onclick="stopPropagation(event)" style="max-width:200px"><option value="" selected>' + val + '</option></select>')
                    .appendTo( $(column.header()).empty() )
                    .on('change', function () {
                                               var indexSelect = $(this).prop('selectedIndex');
                                               var val = $.fn.dataTable.util.escapeRegex($(this).val());                                           
                                               if (indexSelect != 0 && val == '') {column.search('^' + val + '$', true, false).draw();}
                                               else {column.search( val ? '^' + val + '$' : '', true, false).draw();}
                                              } 
                       );
 
                column.data().unique().sort().each( function (d, j) {select.append('<option value="' + d + '">' + d + '</option>')});
                
                var selectHidden = $('<select id="width_tmp_select' + prog + '" style="display:none;max-width:200px"><option id="width_tmp_option' + prog + '"></option></select>').appendTo( $(column.header()) );
                var idSelect = "resizing_select" + prog;
                var idTmpSelect = "width_tmp_select" + prog;
                var idTmpOption = "width_tmp_option" + prog;
                $('#' + idTmpOption).html($('#' + idSelect + ' option:selected').text()); 
                $('#' + idSelect).width($('#' + idTmpSelect).width());
            });
        },  

My idea would be to always remove all options of each select and in the drawCallback always load them according to the unique column value but I'm not be able.

initComplete declare on change event for each column, but how can I run "column.data().unique().sort().each(....)" into drawCallback ?

Sorry for my english

colin

Hi @Giulo ,

This example here sounds like it's doing what you want - a unique value in each dropdown. Could you take a look please and if it doesn't address your issue, please let us know,

Cheers,

Colin

Giulo

Your example work like mine!

I want this if it's possible:
For example when I select age 18 he filter all column and in this case for column office must show only option 'san francisco'

For my select (in this case age) leave first option to select all data

I think after draw datatable remove all option, not first, and recalculate in base of present unique data

colin

Ah, I see, it should be possible - I'll see if I have time today to knock out an example.

C

colin

Hi @Giulo ,

Take a look at this example here, this is now redrawing the dropdowns based on the available options.

Hopefully that'll do the trick!

Cheers,

Colin

Giulo

I've see example and I tried to change my code. I've the same Initcomplete and my function is:

function createDropdowns(api) {
    var prog = 0;      
    api.columns([2,3,4,5,6,7,8]).every(function () {
          var that = this;
          var col = this.index();
          if (col == 2) {var val = 'Modifica';}
          if (col == 3) {var val = 'Numero';}
          if (col == 4) {var val = 'Data';}
          if (col == 5) {var val = 'Azienda';}                 
          if (col == 6) {var val = 'Scadenza';}            
          if (col == 7) {var val = 'Stato';}
          if (col == 8) {var val = 'Operatore';}
          prog++;
          var selected = $('#resizing_select' + prog).val();
          if (selected === undefined || selected === '')
          {
            var select = $('<select id="resizing_select' + prog + '" onclick="stopPropagation(event)" style="max-width:200px"><option value="">' + val + '</option></select>')
              .appendTo( $(that.header()).empty() )
              .on('change', function () {
                  var val = $.fn.dataTable.util.escapeRegex($(this).val());          
                  if (col == 2 || col == 4 || col == 6)
                  {
                    if (val == 'null')
                    {
                      $.ajax({beforeSend: function(){$("#loadMessage").show();},
                              success: function(response){that.search( '^$', true, false).draw();},
                              complete:function(data){$("#loadMessage").hide();}
                            });
                    }
                    else
                    {
                      $.ajax({beforeSend: function(){$("#loadMessage").show();},
                              success: function(response){that.search( val ? val + '+' : '', true, false).draw();},
                              complete:function(data){$("#loadMessage").hide();}
                            });
                    }
                  }
                  else
                  {
                    var indexSelect = $(this).prop('selectedIndex');                                          
                    if (indexSelect != 0 && val == '')
                    {
                      $.ajax({beforeSend: function(){$("#loadMessage").show();},
                              success: function(response){that.search('^' + val + '$', true, false).draw();},
                              complete:function(data){$("#loadMessage").hide();}
                            });                                             
                    }
                    else
                    {
                      $.ajax({beforeSend: function(){$("#loadMessage").show();},
                              success: function(response){that.search( val ? '^' + val + '$' : '', true, false).draw();},
                              complete:function(data){$("#loadMessage").hide();}
                            });
                    }
                  }
                  createDropdowns(api);
            });
  
            if (col == 2 || col == 4 || col == 6)
            {
              var arrayDate = [];
              var i = 0;
              api.cells(null, col, {search: 'applied'}).data().unique().each( function (d) {
                                                         if (d == null) {select.append('<option value="' + d + '"></option>');}
                                                         else
                                                         {
                                                           var data = d.substring(0,10);
                                                           var res = data.split("/");
                                                           var dateNumber = res[2] + res[1] + res[0];
                                                           if (!arrayDate.includes(dateNumber)){arrayDate[i] = dateNumber; i++;}
                                                         }
              });
              if (arrayDate.length > 0)
              {
                arrayDate.sort();
                if (col == 2 || col == 4) {arrayDate.reverse();}
                var arrayDateNew = [];
                var i2 = 0;
                for (i = 0; i < arrayDate.length; i++) {arrayDateNew[i2] = arrayDate[i].substring(6,8) + "/" + arrayDate[i].substring(4,6) + "/" + arrayDate[i].substring(0,4); i2++;}
                for (i2 = 0; i2 < arrayDateNew.length; i2++) {select.append('<option value="' + arrayDateNew[i2] + '">' + arrayDateNew[i2] + '</option>');}
              }                                          
            }
            else {api.cells(null, col, {search: 'applied'}).data().unique().sort().each( function (d) {select.append('<option value="' + d + '">' + d + '</option>')});}
             
            var selectHidden = $('#width_tmp_select' + prog).val();
            if (selectHidden === undefined) {var selectHidden = $('<select id="width_tmp_select' + prog + '" style="display:none;max-width:200px"><option id="width_tmp_option' + prog + '"></option></select>').appendTo( $(that.header()) );}
            var idSelect = "resizing_select" + prog;
            var idTmpSelect = "width_tmp_select" + prog;
            var idTmpOption = "width_tmp_option" + prog;
            $('#' + idTmpOption).html($('#' + idSelect + ' option:selected').text());
            $('#' + idSelect).width($('#' + idTmpSelect).width());
          }
    });

I don't understand why column options are wrong.
For example after first load I select an option from the last column and correctly he returned to me 1 row, but all select have all unique values options.
If I select another option (for example always of last column) the result rows displayed are true but select columns options are relative previous search.
After the other selections the options remain fixed to the first selection (in my case therefore only one option)

Giulo

For example if I substituted this:

$.ajax({beforeSend: function(){$("#loadMessage").show();},
            success: function(response){that.search( val ? val + '+' : '', true, false).draw();},
            complete:function(data){$("#loadMessage").hide();}
 });

by this:

that.search( val ? val + '+' : '', true, false).draw();

works fine but I losted message load.

Why in the ajax call "that" isn't correct? val it's ok

colin

Hi Giulo,

That's a lot of code there to look through - it would help a lot if you could link to a page or create a fiddle (as I did above) that demonstrates the problem.

Cheers,

Colin

Giulo

Hi @colin,
about your last example, how can I fix for example a column value at page load?

I do this:
- load page datatable
- select filter column dropdownlist
- select a specific row and with a button call page form for modify data
- on exit recall page datatable but with the old filter

I've passed column headers with arguments into edit page then sent into datatable page but now?
Into initComplete I call createDropdowns function but I'm not be able to "simulate" a dropdownlist header selection

colin

Hi @Giulo ,

You should just be able to use standard jQuery selectors, as in this modified example here.

Cheers,

Colin

Giulo

Hi @Colin,
ok for standard jQuery selectors and in your example you set "director" on second column but my problem is how load datatable on this selection and how when I've preset more that one column

colin

I'm not quite following when you say load on that selection - the table would already have been loaded to know what the dropdown values are.

It's probably best if you modify that example so that it shows the problem, then give steps on what's wrong and steps on how you want it to work.

Cheers,

Colin

Giulo

@Colin,

you load all datatable data, load dropdownlist unique value and preset "director" selector but not reload datatable with this column value....this is my problem...i'm not be able to do this and ask for that

colin

Ah, do you mean it's not applying the search? That just needs a trigger() at the end of that line - see here.

Giulo

@Collin
thx man, sorry but my english not so good