DataTables: Nie można odczytać stylu właściwości o wartości undefined

118

Otrzymuję ten błąd z następującymi informacjami:

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

Linia powyżej odnosząca się do (funkcja anonimowa) @ VM3156: 180 to:

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

Więc zgaduję, że w tym miejscu zawodzi.

Istnieje element HTML ID:

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

Istnieją również kolumnys.AdoptionTaskInfo.columns i tablice obiektów odpowiedzi. Nie wiem, jak usunąć błędy. Wszelkie sugestie będą pomocne.

javascript  jquery  node.js  datatables 
— Rekrut
źródło
2
Szukaj .stylew swoim kodzie. Próbujesz uzyskać dostęp do tej właściwości niezdefiniowanej zmiennej. Możesz stamtąd debugować.
— Jecoms,
80
Sprawdź, czy liczba kolumn, które próbujesz pobrać, jest taka sama, jak liczba utworzonych przez Ciebie <th>.
— matrixguy
12
Niedopasowanie liczby kolumn do liczby kolumn zdefiniowanych w skryptach JavaScript powodujących ten problem.
— Dhanuka777

Odpowiedzi:

284

Problem w tym, że liczba tagów <th> musi odpowiadać liczbie kolumn w konfiguracji (tablica z kluczem „kolumny”). Jeśli jest mniej tagów <th> niż określonych kolumn, pojawia się ten nieco tajemniczy komunikat o błędzie.

(poprawna odpowiedź jest już obecna jako komentarz, ale powtarzam ją jako odpowiedź, więc łatwiej ją znaleźć - nie widziałem komentarzy)

— ehrencrona
źródło
2
Chcę dodać kolejny punkt, być może ludzie uznają to za pomocne w jakimś przypadku, jeśli nie zdefiniujesz dataSrc, to w swoim json użyj "data", jeśli użyjesz innej nazwy, pojawi się ten błąd.
— Ahmed Sunny
Ponadto, jeśli masz kolumny, które nie są widoczne, ale uwzględnione w takich sytuacjach, jak wyszukiwanie lub Edytor, muszą one znajdować się na końcu listy kolumn: [] lista.
— Tim Dearborn
— Wielkie
24

MOŻLIWE PRZYCZYNY

  • Liczba thelementów w nagłówku lub stopce tabeli różni się od liczby kolumn w treści tabeli lub zdefiniowanej za pomocą columnsopcji.
  • Atrybut colspan jest używany dla thelementu w nagłówku tabeli.
  • Nieprawidłowy indeks kolumny określony w columnDefs.targetsopcji.

ROZWIĄZANIA

  • Upewnij się, że liczba thelementów w nagłówku lub stopce tabeli odpowiada liczbie kolumn zdefiniowanych w columnsopcji.
  • Jeśli używasz colspanatrybutu w nagłówku tabeli, upewnij się, że masz co najmniej dwa wiersze nagłówka i jeden unikalny thelement dla każdej kolumny. Aby uzyskać więcej informacji, zobacz nagłówek Complex .
  • Jeśli używasz columnDefs.targetsopcji, upewnij się, że indeks kolumn liczony od zera odwołuje się do istniejących kolumn.

SPINKI DO MANKIETÓW

Aby uzyskać więcej informacji, zobacz jQuery DataTables: Typowe błędy konsoli JavaScript - TypeError: Cannot read property „style” of undefined, aby uzyskać więcej informacji.

— Gyrocode.com
źródło
13

Powiedziałeś, że wszelkie sugestie będą pomocne, więc obecnie rozwiązałem mój problem z danymi „nie można odczytać stylu” właściwości o niezdefiniowanym ”, ale mój problem polegał w zasadzie na użyciu niewłaściwych indeksów w columnDefssekcji fazy inicjowania tabeli danych . Mam 9 kolumn i indeksy to 0, 1, 2, .., 8 ale używałem indeksów dla 9 i 10 więc po naprawieniu błędnego indeksu usterka zniknęła. Mam nadzieję, że to pomoże.

Krótko mówiąc, musisz obserwować liczbę kolumn i indeksy, jeśli wszędzie są spójne.

Kod błędu:

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

Naprawiono kod:

    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
        ]
    });
— Bahadir Tasdemir
źródło
To mnie uratowało, dzięki. Używam "aTargets": [7], więc przechodzi do błędu, ponieważ nie ma kolumny z indeksem 7. legacy.datatables.net/usage/columns
— fudu
1
Świetnie, cieszę się, że moja odpowiedź rozwiązała Twój problem, + głosów proszę
— Bahadir Tasdemir
10

Miałem ten problem, kiedy ustawiłem colspanw nagłówku tabeli. Więc mój stół był:

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

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

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

Potem raz zmieniam to na:

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

Wszystko działało dobrze.

— Tylko nauka
źródło
4

Upewnij się, że w danych wejściowych response[i]i response[i][j]nie ma undefined/ null.

Jeśli tak, zamień je na „”.

— David I. Samudio
źródło
3

Może się to również zdarzyć podczas rysowania nowej (innej) tabeli. Rozwiązałem to, usuwając najpierw poprzednią tabelę:

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

— Gość
źródło
2

Rozwiązanie jest dość proste. 

  <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>
Rozwiń fragment

                TASKLISTGRID = $("#TASK_LIST_GRID").DataTable({
                    data : response,
                    columns : columns.AdoptionTaskInfo.columns,
                    paging: true
                });
                
                //Note: columns : columns.AdoptionTaskInfo.columns has at least a column not definded in the <thead>
Rozwiń fragment

Uwaga : column: columns.AdoptionTaskInfo.columns ma co najmniej jedną kolumnę niezdefiniowaną w nagłówku tabeli

— Stanley Okpala Nwosa
źródło
1

Co zabawne, otrzymałem następujący błąd, ponieważ o jedną / tę parę za dużo i nadal Google skieruje mnie tutaj. Zostawię to zapisane, aby ludzie mogli to znaleźć.

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)
— Tomás Gaete
źródło
0

W moim przypadku dwukrotnie aktualizowałem datatable po stronie serwera i daje mi ten błąd. Mam nadzieję, że to komuś pomoże.

— Taian
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.