Replies

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  September 2022

  You can try /fixedColumns().left() with the value of 0 when the page size is what you want.

  Kevin
• renato78 Posts: 3Questions: 0Answers: 0

  September 2022

  Hello,
  thanks for your help.
  For try your suggestion, I added this code before "document ready" close:

  table.fixedColumns().left(1);
  

  I expected the value of the fixed columns on the left to change from 3 to 1.
  Unfortunately I was wrong.

  what is the right syntax that I should use?
  Thank you all.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  September 2022 edited September 2022

  I think it has to do with the asynchronous loading of the language option. Datatables hasn't completed initialization when you execute table.fixedColumns().left(1);. See this test case:
  http://live.datatables.net/sufuwuwe/1/edit

  If you remove the language option it works. You can place the fixedColumns.adjust() in initComplete to have it work with language. Or, for testing create a button the executes fixedColumns.adjust().

  Kevin
• renato78 Posts: 3Questions: 0Answers: 0

  September 2022 edited September 2022

  Hello,
  I fixed the script to make it final.
  I post the whole script hoping that it will be of help to those who will have to face the same problem:

  jQuery(document).ready( function () {
      var win = jQuery(this); //this = window
      if (win.width() >= 1200) 
      {
          var fixed_on_left = 3;
      }
      else
      {
          var fixed_on_left = 0;
      }
      var table = jQuery('#my_table').DataTable({
          
          language: {
                  url: "https://cdn.datatables.net/plug-ins/1.12.1/i18n/it-IT.json"
              },
          
          columnDefs: {
                className: "dt-head-center"
              },
          scrollX:        true,
          responsive: true,
          fixedColumns:   {
              left: fixed_on_left,
              right: 0
          },
          
          initComplete: function () {
              this.api()
                  .columns()
                  .every(function () {
                      var column = this;
                      var select = jQuery('<select><option value=""></option></select>')
                          .appendTo(jQuery(column.footer()).empty())
                          .on('change', function () {
                              var val = jQuery.fn.dataTable.util.escapeRegex(jQuery(this).val());
   
                              column.search(val ? '^' + val + '$' : '', true, false).draw();
                          });
   
                      column
                          .data()
                          .unique()
                          .sort()
                          .each(function (d, j) {
                              select.append('<option value="' + d + '">' + d + '</option>');
                          });
                  })
                  .fixedColumns().relayout();
                  
          }, 
          
      });
      
      jQuery(window).on('resize', function(){
          var win = jQuery(this); //this = window
          if (win.width() >= 1200) 
          {
              table.fixedColumns().left('3');
          }
          else
          {
              table.fixedColumns().left('0');
          }
      });
  });
  

  I tried using ".fixedColumns().adjust();" in several ways, without achieving the desired behavior.
  Finally I tried with ".fixedColumns().Relayout();" and it worked on the first try.
  I don't know if what I've found is the ideal solution to manage the number of blocked columns based on the width of the browser window/device width.
  What do you think?
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  September 2022

  Hi,

  Just following up on this - fixedColumns().relayout() is a method from v3.3.3 and before. It was removed in v4 as it is no longer needed

  Have you tried v4? It should make a lot of things much easier.

  Allan