Main header bug /causes dropdown filters to dissapear /// yadcf.2.0 js and DT2.0

StefanSt99

Description of the problem :
After upgrading do yadcf 2.0 and datatables 2.0 , the main header of my application causes the dropdown filters from the columns below to become invisible and I get the error from below . The only workaround of I have found so far is commenting out the code you will see below . I have encountered this problem only after upgrading . A proposed fix that my colleague has thought about will be posted below in the jquery.dataTables.yadcf-2.0.js . So as a summary , the first highlighted header from the test case pretty much makes all the select dropdown filter from below do disspear and simply become normal filters . By modifying the jquery.dataTables.yadcf-2.0.js file uploaded lines 3284 it solved the problem .

Link to test case:
https://live.datatables.net/ronafide/1/edit

Debugger code (debug.datatables.net):

Error messages shown:
jquery-3.6.3.min.js:2 jQuery.Deferred exception: Cannot read properties of null (reading 'cell') TypeError: Cannot read properties of null (reading 'cell')
at http://localhost:8080/static/jquery.dataTables.yadcf-2.0.js:3282:48
at Array.map (<anonymous>)
at appendFilters (http://localhost:8080/static/jquery.dataTables.yadcf-2.0.js:3282:33)
at initAndBindTable (http://localhost:8080/static/jquery.dataTables.yadcf-2.0.js:5026:11)
at Object.init (http://localhost:8080/static/jquery.dataTables.yadcf-2.0.js:5224:11)
at HTMLDocument.<anonymous> (http://localhost:8080/:3759:19)
at e (https://code.jquery.com/jquery-3.6.3.min.js:2:30310)
at https://code.jquery.com/jquery-3.6.3.min.js:2:30612 undefined
(anonymous) @ jquery-3.6.3.min.js:2
jquery-3.6.3.min.js:2 Uncaught TypeError: Cannot read properties of null (reading 'cell')
at jquery.dataTables.yadcf-2.0.js:3282:48
at Array.map (<anonymous>)
at appendFilters (jquery.dataTables.yadcf-2.0.js:3282:33)
at initAndBindTable (jquery.dataTables.yadcf-2.0.js:5026:11)
at Object.init (jquery.dataTables.yadcf-2.0.js:5224:11)
at HTMLDocument.<anonymous> ((index):3759:19)
at e (jquery-3.6.3.min.js:2:30310)
at jquery-3.6.3.min.js:2:30612

kthorngren

Your test case has some Javascript errors causing it to not run.

YADCF is not developed by the Datatables developer. The jquery.dataTables.yadcf-2.0.js file you posted has the developers contact info. Please work with the developer to have the bug fixed and applied to his repo. I suggest reducing the test case to the minimal amount of code needed to demonstrate the issue and you will need to add the YADCF library etc to provide to the developer.

Kevin

kthorngren

Also note that the first header is missing the closing </tr>:

                 <tr class="table-main-header">
                    <th colspan="6" class="columnBorder font-weight-bold">General Info</th>
                    <th colspan="2" class="columnBorder font-weight-bold">Deployment Details</th>
                    <th colspan="5" class="columnBorder font-weight-bold">Ad Details</th>
                    <th colspan="6" class="columnBorder font-weight-bold">Copy Information</th>
                    <th colspan="2" class="columnBorder font-weight-bold" style="min-width:140px">CS Information</th>
                    <th colspan="2" class="columnBorder font-weight-bold">Target URL</th>
                    <th colspan="3" class="font-weight-bold">Ownership Info</th>
                    <th colspan="1" class="columnBorder font-weight-bold">Notes</th> 
                   
                   <!-- end of it -->
 
                <tr class="table-secondary-header">

Kevin