JQuery Datatables: nie można odczytać właściwości „aDataSort” wartości undefined

99

Stworzyłem to skrzypce i działa zgodnie z moimi wymaganiami: Fiddle

Jednak gdy używam tego samego w mojej aplikacji, pojawia się błąd w konsoli przeglądarki z informacją, że nie można odczytać właściwości „aDataSort” wartości undefined

W mojej aplikacji javascript czyta coś takiego jak poniżej: sprawdziłem wyjście kontrolera ... działa dobrze i jest również drukowane na konsoli.

$(document).ready(function() {

    $.getJSON("three.htm", function(data) {
             // console.log("loadDataTable >>  "+JSON.stringify(data));
             })
             .fail(function( jqxhr, textStatus, error ) {
             var err = textStatus + ', ' + error;
             alert(err);
             console.log( "Request Failed: " + err);
             })
             .success(function(data){
                 loadDataTable(data);
             });

    function loadDataTable(data){
         $("#recentSubscribers").dataTable().fnDestroy();    
         var oTable = $('#recentSubscribers').dataTable({
             "aaData" : JSON.parse(data.subscribers),
             "processing": true,
            "bPaginate": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false,
            "aoColumnDefs": [{
            "sTitle": "Subscriber ID",
            "aTargets": [0]
        }, {
            "sTitle": "Install Location",
            "aTargets": [1]
        }, {
            "sTitle": "Subscriber Name",
            "aTargets": [2]
        }, {
            "aTargets": [0], 
            "mRender": function (data, type, full) {
                return '<a style="text-decoration:none;" href="#" class="abc">' + data + '</a>';
            }
        }],
            "aoColumns": [{
            "mData": "code"
        }, {
            "mData": "acctNum"
        }, {
            "mData": "name"
        }]
            });

    }       

})
swateek
źródło
Upewnij się, że dołączony kod jest taki sam jak skrzypce (nie jest) i ten, który używasz. Również na skrzypcach masz dwa aTargets [0], sprawdź: jsfiddle.net/gL0p0t42
Leandro Carracedo
Nie podajesz źródła, które faktycznie wywołuje „aDataSort”.
Daniel
Masz na myśli identyfikator tabeli html? Zadbałem o to. Spróbuję mieć jeden cel.
swateek
2
powiązane (nowsze) pytanie wraz z odpowiedzią
Nikos M.
1
Miałem ten sam problem i stwierdzam, że zamawiam według numeru kolumny, który nie istnieje. Miałem tylko 3 kolumny, ale zamówiłem według piątego.
Hos Mercury,

Odpowiedzi:

138

Ważne jest, aby Twoja THEAD nie była pusta w tabeli, ponieważ dataTable wymaga określenia liczby kolumn oczekiwanych danych. Zgodnie z Twoimi danymi powinno być

<table id="datatable">
    <thead>
        <tr>
            <th>Subscriber ID</th>
            <th>Install Location</th>
            <th>Subscriber Name</th>
            <th>some data</th>
        </tr>
    </thead>
</table>
Gkrish
źródło
30
Co się stanie, jeśli mam wymaganie, które obejmuje konfigurowanie kolumn i ich liczbę w czasie wykonywania? Jak mogę zaimplementować kod dla powyższego wymagania?
CS Lewis
Pomogło mi to rozwiązać problem z niewydrukowanymi danymi. Cóż, pomogło mi to również wyleczyć jeszcze jeden mój problem dotyczący datatable, w którym napisałem "Sort":false, a następnie mogłem wyświetlić listę w porządku malejącym, która pochodziła z kontrolera jako Model.OrderByDescending(x=>x.Action==0).ThenBy(x=>x.Action).
Sorangwala Abbasali,
2
<thead>musi zawierać <tr>, a <th>y
brahimm
Dotyczy to standardowego DataTable (i rozwiązuje mój problem). RE: @CSLewis: Nie jestem pewien ze statycznymi tabelami, ale jeśli konfigurujesz kolumny w czasie wykonywania wraz z żądaniem ajax, nie jest wymagane, aby nic w nim było, <thead>ale musisz zdefiniować kolumny w swojej inicjacji DataTable () w następujący sposób: datatables .net / reference / option / columns.data
Harvey Dobson
65

Wystąpił również ten problem, ta tablica była poza zakresem:

order: [1, 'asc'],
hogarth45
źródło
1
Ten zawsze mnie dopada. Czy istnieje sposób, aby domyślnie ustawić tablicę na 0, jeśli tablica jest poza zakresem?
JGreasley
6
@JGreasley Możesz ustawić ją jako pustą tablicę: order: []
hogarth45
2
Moje kolumny, w których 5 i ja określaliśmy tutaj 7! Dzięki
aiffin
1
Jeden! Tydzień! Cały tydzień! A to 7-dniowy tydzień! I jestem prawie pewien, że nie pracowałem od 9 do 17, bardziej jak od 9 do północy ... wszystko to stracone, ponieważ nie wiedziałem o tym błędzie !! Arrrrrrrrrrrgh !! ... Tyle zmarnowanego czasu, bardzo się wstydzę, w kółko przeszukiwałem Internet i eksperymentowałem ze wszystkimi możliwymi rozwiązaniami - żadne nie zbliżyło się nawet do tego, by to „naprawić”. A potem ... przez zwykły przypadek i już zrozpaczony ... Natknąłem się na twoją odpowiedź i ta-da! W pięć minut wszystko zostało naprawione . Gdybym był bogaty, wysłałbym Ci czek na 10 000 € - lol
Gwyneth Llewelyn
9

U mnie błąd był w samym DataTables; Kod do sortowania w DataTables 1.10.9 nie będzie sprawdzał granic; więc jeśli używasz czegoś takiego jak

order: [[1, 'asc']]

z pustą tabelą nie ma wiersza idx 1 -> ten wyjątek zapewnia. Stało się tak, ponieważ dane tabeli były pobierane asynchronicznie. Początkowo podczas ładowania strony dataTable jest inicjowana bez danych. Powinien zostać zaktualizowany później, gdy tylko zostaną pobrane dane wyników.

Moje rozwiązanie:

// add within function _fnStringToCss( s ) in datatables.js
// directly after this line
// srcCol = nestedSort[i][0];

if(srcCol >= aoColumns.length) {
    continue;
}

// this line follows:
// aDataSort = aoColumns[ srcCol ].aDataSort;
Oliver Zendel
źródło
Dziękuję za omówienie tej kwestii; @ hogarth45 powyżej zidentyfikował problem / błąd poprawnie, ale nie było tak jasne, dlaczego w rzeczywistości był to problem. Odpowiadam ci dwa lata później ... i najwyraźniej nie zostało to poprawione, a przynajmniej o ile wiem, nawet nie wspomniano o tym w oficjalnej dokumentacji.
Gwyneth Llewelyn
7

Napotkałem ten sam problem, następujące zmiany rozwiązały mój problem.

$(document).ready(function() {
     $('.datatable').dataTable( {
            bSort: false,
            aoColumns: [ { sWidth: "45%" }, { sWidth: "45%" }, { sWidth: "10%", bSearchable: false, bSortable: false } ],
        "scrollY":        "200px",
        "scrollCollapse": true,
        "info":           true,
        "paging":         true
    } );
} );

aoColumnstablica określa szerokość każdej kolumny i jej sortablewłaściwości.

Kolejna rzecz, o której należy wspomnieć o tym błędzie, pojawi się również podczas zamawiania według numeru kolumny, która nie istnieje.

Abdul Manan
źródło
4

W moim przypadku miałem

$(`#my_table`).empty();

Gdzie to powinno być

$(`#my_table tbody`).empty();

Uwaga: w moim przypadku musiałem opróżnić tabelę, ponieważ przed wstawieniem nowych danych miałem dane, które chciałem usunąć.

Pomyślałem tylko o udostępnieniu tego, gdzie „może” to komuś pomóc w przyszłości!

JumpingElephant
źródło
1

Miałem ten problem, ponieważ inny skrypt usuwał wszystkie tabele i odtwarzał je, ale moja tabela nie była odtwarzana. Spędziłem wieki nad tym problemem, zanim zauważyłem, że mój stół nie był nawet widoczny na stronie. Czy widzisz swoją tabelę przed zainicjowaniem DataTables?

Zasadniczo inny skrypt robił:

let tables = $("table");
for (let i = 0; i < tables.length; i++) {
  const table = tables[i];
  if ($.fn.DataTable.isDataTable(table)) {
    $(table).DataTable().destroy(remove);
    $(table).empty();
  }
}

I powinien był zrobić:

let tables = $("table.some-class-only");
... the rest ...
Ryan Shillington
źródło
1

Musisz zamienić pojedyncze cudzysłowy [']na podwójne cudzysłowy z ["]powodu analizy

jeśli używasz atrybutu kolejności danych w tabeli, użyj go w ten sposóbdata-order='[[1, "asc"]]'

MohitGhodasara
źródło
nie dotyczy pytania OP, ale działa w moim przypadku (używając atrybutów danych html 5)
blackbiron
0

W moim przypadku rozwiązałem problem, ustalając prawidłowy numer kolumny podczas stosowania orderwłaściwości wewnątrz skryptu, w którym konfigurujesz tabelę danych.

var table = $('#mytable').DataTable({
     .
     .
     .
     order: [[ 1, "desc" ]],
user13755332
źródło
Istnieją już inne odpowiedzi, które mówią w zasadzie to samo. Spróbuj uniknąć zbędnych odpowiedzi na pytania, które są stare.
thelr