Replies

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2019

  This is excellent - thank you! I need to give myself a little head room to think about this a bit more and make sure that there aren't any knock on effects, so it might be a little while before I can get this integrated (probably in v2) but that looks great. I've added it to my bug tracker for v2 so I don't loose it.

  Regards,
  Allan
• awelch Posts: 38Questions: 1Answers: 3

  May 2019

  After some more thorough testing of this solution I have determined that there needs to be a few adjustments. In the posted solution there is a problem when mixing columns with width definitions and columns without width definitions. Any columns that do not have a width defined will be set to a width of 0px rather than having their widths calculated based on the widest cell in the column. You can see an example of this bug (using a custom datatables.js script with the changes mentioned above) here: live.datatables.net/tuyazaso/1/edit. Notice the first column's width is 0 since it does not have a width set at initialization. In order to get around this there needs to be a change to the Main Bug Fix section. The proposed change should be ignored, that section should read:

  else if (scrollX) {
      tmpTable.css('width', 'auto');
      tmpTable.removeAttr('width');
   
      // If there is no width attribute or style, then allow the table to
      // collapse
      if (tmpTable.width() < tableContainer.clientWidth && !tableWidthAttr && !styleWidth) {
          tmpTable.width(tableContainer.clientWidth);
      }
  }
  

  Instead, the change should be made to the block where the widest node is retrieved. That section should be changed to:

  // Find the widest cell for each column and put it into the table
  if (oSettings.aoData.length) {
      for (i = 0; i < visibleColumns.length; i++) {
          columnIdx = visibleColumns[i];
          column = columns[columnIdx];
  
          if (!column.sWidthOrig) {
              $(_fnGetWidestNode(oSettings, columnIdx))
                  .clone(false)
                  .append(column.sContentPadding)
                  .appendTo(tr);
          }                    
      }
  }
  

  This will only populate the column with the widest cell if it doesn't already have a width set.

  With this change, tmpTable will always have its width set to auto when using scrollX. This means that this change will not allow a column to have its width set to a size smaller than the text in the header. You can see an example of this here: live.datatables.net/tuyazaso/2/edit. Notice the second column is set to 50px but is rendered wider so that all of the header text shows. This was not an adequate solution for me so I made another small change to account for this. In the block just above the aforementioned section I made the following change:

  // Apply custom sizing to the cloned header
  headerCells = _fnGetUniqueThs(oSettings, tmpTable.find('thead')[0]);
  
  var hiddenWidth = 0;
  for (i = 0; i < visibleColumns.length; i++) {
      column = columns[visibleColumns[i]];
      if (/^0*\.?0*%$/.test(column.sWidthOrig)) {
          var header = $(column.nTh);
          hiddenWidth += header.outerWidth() - header.width();
      }
      headerCells[i].style.width = column.sWidthOrig !== null && column.sWidthOrig !== '' ?
          _fnStringToCss(column.sWidthOrig) :
          '';
  
      // For scrollX we need to force the column width otherwise the
      // browser will collapse it. If this width is smaller than the
      // width the column requires, then it will have no effect
      if (column.sWidthOrig && scrollX) {
          $(headerCells[i]).html('').append($('<div/>').css({
              width: column.sWidthOrig,
              margin: 0,
              padding: 0,
              border: 0,
              height: 1
          }));
      }
  }
  

  Note the line $(headerCells[i]).html(''). This will clear all content from the header, when column.sWidthOrig has a value and scrollX is used, so the columns width will be exactly what it is set to.
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  May 2019

  Amazing - thank you for the update.

  Allan
• awelch Posts: 38Questions: 1Answers: 3

  June 2019

  I came across a bug in my revised solution above. In the block of code where the widest node is retrieved I forgot to add empty nodes in the case that sWidthOrig is set. The code should actually read:

  // Find the widest cell for each column and put it into the table
  if (oSettings.aoData.length) {
      for (i = 0; i < visibleColumns.length; i++) {
          columnIdx = visibleColumns[i];
          column = columns[columnIdx];
   
          if (!column.sWidthOrig) {
              $(_fnGetWidestNode(oSettings, columnIdx))
                  .clone(false)
                  .append(column.sContentPadding)
                  .appendTo(tr);
          }
          else {
              $("<td/>")
                  .append(column.sContentPadding)
                  .appendTo(tr);
          }                
      }
  }
  
• awelch Posts: 38Questions: 1Answers: 3

  October 2019 edited October 2019

  I have another addendum to this solution. I almost never use DataTables without the scrollY setting but I recently have and realized there is another issue that must be addressed. The following section of code is unreachable in the current implementation since the userInputs variable is not correctly defined (it will always be true, see Bug Fix 2 above):

  /* If the number of columns in the DOM equals the number that we have to
  * process in DataTables, then we can use the offsets that are created by
  * the web- browser. No custom sizes can be set in order for this to happen,
  * nor scrolling used
  */
  if (ie67 || !userInputs && !scrollX && !scrollY &&
      columnCount == _fnVisbleColumns(oSettings) &&
      columnCount == headerCells.length
  ) {
      for (i = 0; i < columnCount; i++) {
          var colIdx = _fnVisibleToColumnIndex(oSettings, i);
  
          if (colIdx !== null) {
              columns[colIdx].sWidth = _fnStringToCss(headerCells.eq(i).width());
          }
      }
  }
  

  This problem with this section of code is that it will never change the column widths after the initial call. headerCells.eq(i).width() is used to set the width of the columns. Once the widths are set on the header cells this will keep pulling the same value rather than letting the browser calculate the value and returning that. The solution is to remove all css widths from the header cells using headerCells.css("width", "");:

  /* If the number of columns in the DOM equals the number that we have to
  * process in DataTables, then we can use the offsets that are created by
  * the web- browser. No custom sizes can be set in order for this to happen,
  * nor scrolling used
  */
  if (ie67 || !userInputs && !scrollX && !scrollY &&
      columnCount == _fnVisbleColumns(oSettings) &&
      columnCount == headerCells.length
  ) {
      //Remove header cell width settings so the browser can recalculate
      headerCells.css("width", "");
      for (i = 0; i < columnCount; i++) {
          var colIdx = _fnVisibleToColumnIndex(oSettings, i);
  
          if (colIdx !== null) {
              columns[colIdx].sWidth = _fnStringToCss(headerCells.eq(i).width());
          }
      }
  }
  
• colin Posts: 15,179Questions: 1Answers: 2,590

  October 2019

  Excellent, thanks for sharing.