DataTables and Multi-Row Headed Tables

r1409

Hello,

Link to test case:

http://live.datatables.net/yohukika/1/edit

Debugger code (debug.datatables.net):

iwonaq

Error messages shown:

jquery-3.4.0.min.js:2 Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')

Description of problem:

I have a 3-row header table that pulls data from a mysql query. I use the following to initialize DataTables:

$( document ).ready(function() {
   $('#tbl_daily_mining_rpt').DataTable( {
      "paging":   false,
      "ordering": false,
      "info":     false,
      "processing":false,
      "searching": false,
      "serverSide": false
   });  
});

I get error given above even when I remove all options/ settings from the initialization. I am using UserSpice 5.4.0 and my scripts are being loaded via CDN.

I can use DataTables with out any issues on other pages within my site but these are all simple tables with single row headers. I have validated the html for my table and can not find any issues with the table layout. My project is with our local intranet so I am unable to give a link to the site.

kthorngren

In your 3rd header row you have 39 columns but in the first row you have 40 columns. They need to match. See the Complex header and HTML requirements for more details.

Kevin

r1409

Hi Kevin,

The first <th> in row 1 has a rowspan="3". Does this not make 40 columns in row 3?

kthorngren

The Complex Header example state this:

Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to attach the order listener, if more than one cell for a column if found.

You will need to have 40 unique th for this header row. No colspan.

Kevin

r1409

My apologies. Please bear with me as I have trouble understanding. I have edited my header as below. The table still has 3 rows, however, the one at the bottom now has 40 unique <th> tags and no colspan or rowspan tags. The same error still occurs.

<thead>
    <tr>
      <th rowspan="2" scope="col">VGML</th>
      <th scope="col">Daily Mining Report</th>
      <th scope="col" id="top-space-header" colspan="38">A</th>
    </tr>
    <tr>
      <th scope="col">Decline</th>
      <th colspan="31" scope="col">2022-03</th>
      <th colspan="3" scope="col">Month To Date</th>
      <th colspan="4" scope="col">Daily Average</th>
    </tr>
    <tr id="tr_kpi" class="tr_dmr">
      <th scope="col">B&nbsp;</th>
      <th>KPIs</th>
      <th id="td_kpi_1" scope="col">1</th>
      <th id="td_kpi_2" scope="col">2</th>
      <th id="td_kpi_3" scope="col">3</th>
      <th id="td_kpi_4" scope="col">4</th>
      <th id="td_kpi_5" scope="col">5</th>
      <th id="td_kpi_6" scope="col">6</th>
      <th id="td_kpi_7" scope="col">7</th>
      <th id="td_kpi_8" scope="col">8</th>
      <th id="td_kpi_9" scope="col">9</th>
      <th id="td_kpi_10" scope="col">10</th>
      <th id="td_kpi_11" scope="col">11</th>
      <th id="td_kpi_12" scope="col">12</th>
      <th id="td_kpi_13" scope="col">13</th>
      <th id="td_kpi_14" scope="col">14</th>
      <th id="td_kpi_15" scope="col">15</th>
      <th id="td_kpi_16" scope="col">16</th>
      <th id="td_kpi_17" scope="col">17</th>
      <th id="td_kpi_18" scope="col">18</th>
      <th id="td_kpi_19" scope="col">19</th>
      <th id="td_kpi_20" scope="col">20</th>
      <th id="td_kpi_21" scope="col">21</th>
      <th id="td_kpi_22" scope="col">22</th>
      <th id="td_kpi_23" scope="col">23</th>
      <th id="td_kpi_24" scope="col">24</th>
      <th id="td_kpi_25" scope="col">25</th>
       <th id="td_kpi_26" scope="col">26</th>
       <th id="td_kpi_27" scope="col">27</th>
       <th id="td_kpi_28" scope="col">28</th>
       <th id="td_kpi_29" scope="col">29</th>
       <th id="td_kpi_30" scope="col">30</th>
       <th id="td_kpi_31" scope="col">31</th>
      <th id="td_kpi_mtd_actual" scope="col">Actual</th>
      <th id="td_kpi_mtd_plan" scope="col">Plan</th>
      <th id="td_kpi_mtd_var" scope="col">Var.</th>
      <th id="td_kpi_da_actual" scope="col">Actual</th>
      <th id="td_kpi_da_plan" scope="col">Plan</th>
      <th id="td_kpi_da_var" scope="col">Var.</th>
      <th id="td_kpi_da_percent" scope="col">%</th>
    </tr>
  </thead>

kthorngren

Sorry I missed that the first column has rowspan=3. The header should be good.

The problem is your first row has rowspan which isn't supported by Datatables in the tbody. See the HTML docs I linked to earlier:

<th scope="row" rowspan="10">Development</th>

Then the second row has 39 columns instead of 40. Datatables requires all rows have the same number of columns and that number matches the header.

I updated your example removing the rowspan in the first row and removing the others. Now the Datatable works:
http://live.datatables.net/yohukika/5/edit

Looks like you want to try grouping rows. See if the RowGroup extension will do what you want.

Kevin

r1409

Thanks Kevin.

Took me while but I finally managed to get it working.