DataTables: kan de eigenschapsstijl van undefined niet lezen

Ik krijg deze foutmelding met het volgende:

jquery.dataTables.js:4089 Uncaught TypeError: Cannot read property 'style' of undefined(…)
_fnCalculateColumnWidths @ jquery.dataTables.js:4089
_fnInitialise @ jquery.dataTables.js:3216
(anonymous function) @ jquery.dataTables.js:6457
each @ jquery-2.0.2.min.js:4
each @ jquery-2.0.2.min.js:4
DataTable @ jquery.dataTables.js:5993
$.fn.DataTable @ jquery.dataTables.js:14595
(anonymous function) @ VM3329:1
(anonymous function) @ VM3156:180
l @ jquery-2.0.2.min.js:4
fireWith @ jquery-2.0.2.min.js:4
k @ jquery-2.0.2.min.js:6
(anonymous function) @ jquery-2.0.2.min.js:6

De regel hierboven die verwijst naar (anonieme functie) @ VM3156:180 is:

               TASKLISTGRID = $("#TASK_LIST_GRID").DataTable({
                    data : response,
                    columns : columns.AdoptionTaskInfo.columns,
                    paging: true
                });

Dus ik vermoed dat dit is waar het faalt.

Het HTML ID-element bestaat:

 <table id="TASK_LIST_GRID" class="table table-striped table-bordered table-hover dataTable no-footer" width="100%" role="grid" aria-describedby="TASK_LIST_GRID_info">
  <thead>
    <tr role="row">
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Solution</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Status</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Category</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Type</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Due Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Create Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Owner</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Comments</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Mnemonic</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Domain</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Approve</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Dismiss</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Ook de columns.AdoptionTaskInfo.columns & arrays van responsobjecten bestaan. Ik weet niet zeker hoe ik fouten moet debuggen.. Alle suggesties zijn nuttig..

Antwoord 1, autoriteit 100%

Het probleem is dat het aantal <th> tags moeten overeenkomen met het aantal kolommen in de configuratie (de array met de sleutel “kolommen”). Als er minder <th> tags dan de opgegeven kolommen, krijg je deze enigszins cryptische foutmelding.

(het juiste antwoord is al aanwezig als opmerking, maar ik herhaal het als antwoord zodat het gemakkelijker te vinden is – ik heb de opmerkingen niet gezien)

Antwoord 2, autoriteit 14%

MOGELIJKE OORZAKEN

• Aantal thelementen in de kop- of voettekst van de tabel verschilt van het aantal kolommen in de hoofdtekst van de tabel of is gedefinieerd met columnsoptie.
• Kenmerk colspan wordt gebruikt voor thelement in de tabelkop.
• Onjuiste kolomindex opgegeven in optie columnDefs.targets.

OPLOSSINGEN

• Zorg ervoor dat het aantal thelementen in de kop- of voettekst van de tabel overeenkomt met het aantal kolommen dat is gedefinieerd in de columnsoptie.
• Als je het kenmerk colspanin de tabelkop gebruikt, zorg er dan voor dat je ten minste twee koprijen en één uniek thelement voor elke kolom hebt. Zie Complexe kopvoor meer informatie.
• Als u de optie columnDefs.targetsgebruikt, maakt u zorg ervoor dat de op nul gebaseerde kolomindex verwijst naar bestaande kolommen.

LINKS

Zie jQuery-gegevenstabellen: veelvoorkomende fouten in de JavaScript-console – TypeError: kan eigenschap ‘stijl’ van undefinedniet lezen voor meer informatie.

Antwoord 3, autoriteit 4%

U zei dat suggesties nuttig zouden zijn, dus momenteel heb ik mijn DataTables-probleem “kan eigenschap ‘stijl’ van undefined” niet lezen, opgelost, maar mijn probleem was in feite het gebruik van verkeerde indexen in de columnDefs-sectie van de gegevenstabelinitiatiefase . Ik heb 9 kolommen en de indexen zijn 0, 1, 2, .., 8 maar ik gebruikte indexen voor 9 en 10, dus na het oplossen van het verkeerde indexprobleem is de fout verdwenen. Ik hoop dat dit helpt.

Kortom, u moet het aantal kolommen en indexen in de gaten houden als ze overal consistent zijn.

Buggycode:

   jQuery('#table').DataTable({
        "ajax": {
            url: "something_url",
            type: 'POST'
        },
        "processing": true,
        "serverSide": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "columns": [
            { "data": "cl1" },
            { "data": "cl2" },
            { "data": "cl3" },
            { "data": "cl4" },
            { "data": "cl5" },
            { "data": "cl6" },
            { "data": "cl7" },
            { "data": "cl8" },
            { "data": "cl9" }
        ],
        columnDefs: [
            { orderable: false, targets: [ 7, 9, 10 ] } //This part was wrong
        ]
    });

Vaste code:

   jQuery('#table').DataTable({
        "ajax": {
            url: "something_url",
            type: 'POST'
        },
        "processing": true,
        "serverSide": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "columns": [
            { "data": "cl1" },
            { "data": "cl2" },
            { "data": "cl3" },
            { "data": "cl4" },
            { "data": "cl5" },
            { "data": "cl6" },
            { "data": "cl7" },
            { "data": "cl8" },
            { "data": "cl9" }
        ],
        columnDefs: [
            { orderable: false, targets: [ 5, 7, 8 ] } //This part is ok now
        ]
    });

Antwoord 4, autoriteit 4%

meestal gebeurt het wanneer het aantal tabelkoppen en het aantal gegevenscellen niet overeenkomen

Antwoord 5, autoriteit 3%

Ik had dit probleem toen ik colspaninstelde in de tabelkop. Dus mijn tafel was:

       <thead>
            <tr>
                <th colspan="2">Expenses</th>
                <th colspan="2">Income</th>
                <th>Profit/Loss</th>
            </tr>
        </thead>

En zodra ik het verander in:

       <thead>
            <tr>
                <th>Expenses</th>
                <th></th>
                <th>Income</th>
                <th></th>
                <th>Profit/Loss</th>
            </tr>
        </thead>

Alles werkte prima.

Antwoord 6, autoriteit 2%

Voor mij hadden de gegevenskolommen {data: columnName}meer kolommen
dan tabelkoppen <th>Column Name</th>

Antwoord 7

Zorg ervoor dat in uw invoergegevens, response[i]en response[i][j], niet undefined/null.

Zo ja, vervang ze dan door “”.

Antwoord 8

Het kan ook gebeuren bij het tekenen van een nieuwe (andere) tabel. Ik heb dit opgelost door eerst de vorige tabel te verwijderen:

$("#prod_tabel_ph").remove();

Antwoord 9

De oplossing is vrij eenvoudig.

 <table id="TASK_LIST_GRID" class="table table-striped table-bordered table-hover dataTable no-footer" width="100%" role="grid" aria-describedby="TASK_LIST_GRID_info">
  <thead>
    <tr role="row">
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Solution</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Status</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Category</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Type</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Due Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Create Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Owner</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Comments</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Mnemonic</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Domain</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Approve</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Dismiss</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

jquery.dataTables.min.js:27 Uncaught TypeError: Cannot read property 'className' of undefined
at ua (jquery.dataTables.min.js:27)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:127)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at n.fn.init.j (jquery.dataTables.min.js:116)
at HTMLDocument.<anonymous> (history:619)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)

if ($.fn.DataTable.isDataTable('#results_table')) {
    $('#results_table').DataTable().destroy();
}
$('#results_table thead').empty();
$('#results_table tbody').empty();
$('#results_table').DataTable({
    data: data,
    columns: columns,
    ...etc...
});