javascript - DataTables: Kan ikke lese egenskapen style av undefined

Jeg får denne feilen med følgende:

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

Linjen ovenfor som refererer til (anonym funksjon) @ VM3156:180 er:

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

Så jeg antar at dette er stedet det feiler.

HTML-ID-elementet eksisterer:

  <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>

Også, columns.AdoptionTaskInfo.columns og response-objektets arrays eksisterer. Ikke sikker på hvordan jeg skal feilsøke hva som er galt.. Eventuelle forslag vil være nyttige..

Svar #1

Problemet er at antall <th>-tagger må samsvare med antall kolonner i konfigurasjonen (arrayen med nøkkelen "columns"). Hvis det er færre <th>-tagger enn kolonner spesifisert, får du denne litt kryptiske feilmeldingen.

(det riktige svaret er allerede til stede som en kommentar, men jeg gjentar det som et svar slik at det er lettere å finne - jeg så ikke kommentarene)

Svar #2

MULIGE ÅRSAKER

  • Antall th-elementer i tabellhodet eller -bunnen skiller seg fra antall kolonner i tabellegemet eller definert ved bruk av columns-alternativet.
  • Attributtet colspan brukes for th-elementet i tabellhodet.
  • Feil kolonneindeks angitt i columnDefs.targets-alternativet.

LØSNINGER

  • Sørg for at antall th-elementer i tabellhodet eller -bunnen samsvarer med antall kolonner definert i columns-alternativet.
  • Hvis du bruker colspan-attributtet i tabelloverskriften, må du sørge for at du har minst to overskriftsrader og ett unikt th-element for hver kolonne. Se Kompleks overskrift for mer informasjon.
  • Hvis du bruker columnDefs.targets-alternativet, sørg for at nullbasert kolonneindeks refererer til eksisterende kolonner.

LENKER

Se jQuery DataTables: Vanlige JavaScript-konsollfeil - TypeError: Kan ikke lese egenskapen ‘style’ av undefined for mer informasjon.

Svar #3

for det meste skjer det når antallet tabelloverskrifter og antallet dataceller ikke stemmer overens

Svar #4

Du sa at alle forslag ville være nyttige, så for øyeblikket har jeg løst mitt DataTables-problem «cannot read property 'style' of undefined», men problemet mitt var egentlig at jeg brukte feil indekser i columnDefs-delen under datatabellens initieringsfase. Jeg har 9 kolonner og indeksene er 0, 1, 2, .. , 8, men jeg brukte indeksene 9 og 10, så etter å ha fikset problemet med feil indeks har feilen forsvunnet. Jeg håper dette hjelper.

Kort sagt, du må passe på antallet kolonner og indekser hvis det er konsekvent overalt.

Feilaktig kode:

    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
        ]
    });

Fikset kode:

    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
        ]
    });

Svar #5

For meg hadde datakolonnene {data: columnName} flere kolonner enn tabellhodene <th>Column Name</th>

Svar #6

Jeg hadde dette problemet når jeg satte colspan i tabelloverskriften. Så min tabell var:

        <thead>
            <tr>
                <th colspan="2">Expenses</th>

                <th colspan="2">Income</th>

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

Så når jeg endrer det til:

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

Alt fungerte helt fint.

Relaterte artikler