Replies

• allan Posts: 63,494Questions: 1Answers: 10,470 Site admin

  February 27

  Hi Norberto,

  Yes, I've hit upon this issue in another thread or two as well. It looks like an error in the browser engines - I need to do some work to write up a test case and submit it, as it does appear to be a colspan in the first row of the table causing the problem, regardless of DataTables.

  Apologies I don't have a better answer at the moment.

  Allan
• kthorngren Posts: 21,324Questions: 26Answers: 4,949

  February 27 edited February 27

  I built a test case for you.
  https://live.datatables.net/maqekume/1/edit

  I changed colspan from 5 to 6 to match the number of columns in the table. It seems to work correctly.

  <tr class="group"><td colspan="6">Edinburgh</td></tr>
  

  Please update the test case to show the issue.

  Kevin
• proteos_engineering Posts: 5Questions: 0Answers: 0

  February 27

  Hi Kthorngren,
  from your example you have to remove the TH tags so that the datatables build the THEAD and the TBODY. This way you will see the error even if the colspan is 6. Thanks
• kthorngren Posts: 21,324Questions: 26Answers: 4,949

  February 27

  I did that and it still looks correct:
  https://live.datatables.net/maqekume/3/edit

        <table id="table-data" class="display nowrap" width="100%">
        </table>
  

  <tr class="group"><td colspan="6">Edinburgh</td></tr>
  

  Maybe you can update the example to show the issue.

  Kevin
• kthorngren Posts: 21,324Questions: 26Answers: 4,949

  February 27

  Here is that same example with RowGroup:
  https://live.datatables.net/jipifugi/1/edit

  However Allan did mention he's seen something similar. Possibly this thread. When you insepct your page do you see a colgroup element after the table tag?

  Kevin
• proteos_engineering Posts: 5Questions: 0Answers: 0

  February 27

  Hi Kevin, the table in question is very complex and there is a colgroup with the dimensions in pixels. However, while waiting for a more elegant solution, I solved it like this:

  $('#table-data').DataTable({
      columns: [
          { title: 'Name' },
          { title: 'Position' },
          { title: 'Office' },
          { title: 'Extn.' },
          { title: 'Start date' },
          { title: 'Salary' }
      ],
      data: dataSet,
      paging: false,
      scrollCollapse: false,
      scrollY: '200px',
      order: [[2, 'asc']],
      drawCallback: function (settings) {
  
          var api = this.api();
          var rows = api.rows({ page: 'current' }).nodes();
          **/* temporary */
          var ncols = api.context[0].aoColumns.filter(function (value) { return value.bVisible; }).length;
          $(rows).eq(0).before('<tr class="d-none">' + Array(ncols).fill('<td></td>').join('') + '</tr>');
          /* end temporary */**
          var last = null;
          api.column(2, { page: 'current' })
              .data()
              .each(function (group, i) {
                  if (last !== group) {
                      $(rows)
                          .eq(i)
                          .before(
                              '<tr class="group"><td>A</td><td colspan="5">' +
                              group +
                              '</td></tr>'
                          );
  
                      last = group;
                  }
              });
      }
  });
  
• proteos_engineering Posts: 5Questions: 0Answers: 0

  February 27

  Hi Kevin, I wrote in Italian by mistake.
• KukyRoad Posts: 2Questions: 0Answers: 0

  October 22

  Good day, everyone!

  I spent a lot of hours trying to find a solution to my problem and even though this looked helpful it did not do it for me.

  Ends up the solution was as simple as adding this line of code to the html element linked to the DataTable object:

  $('#yourTableElementIdGoesHere').columns.adjust().draw();

  Hopefully this helps someone else.

  Reference to the official site: https://datatables.net/reference/api/columns.adjust()

  Take care, and happy coding!
• KukyRoad Posts: 2Questions: 0Answers: 0

  October 22

  You need to run this line!

  $('#yourTableElementIdGoesHere').DataTable().columns.adjust().draw();