Header Columns dropdownlist: reload options on change

Header Columns dropdownlist: reload options on change

GiuloGiulo Posts: 22Questions: 2Answers: 0

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

Answers

  • colincolin Posts: 2,073Questions: 0Answers: 380

    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

  • GiuloGiulo Posts: 22Questions: 2Answers: 0

    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

  • colincolin Posts: 2,073Questions: 0Answers: 380

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

    C

  • colincolin Posts: 2,073Questions: 0Answers: 380

    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

  • GiuloGiulo Posts: 22Questions: 2Answers: 0

    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)

  • GiuloGiulo Posts: 22Questions: 2Answers: 0

    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

  • colincolin Posts: 2,073Questions: 0Answers: 380

    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

Sign In or Register to comment.