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

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

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

Odpowiedzi:

MOŻLIWE PRZYCZYNY

ROZWIĄZANIA

SPINKI DO MANKIETÓW