Я работаю над простым примером ajax в таблицах данных, и он не работает, и я не могу его объяснить. У меня есть простая таблица:

<table id="tblAddresses">
  <thead>
    <tr>
        <th>Street Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip Code</th>
    </tr>
 </thead>
 <tfoot>
    <tr>
        <th>Street Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip Code</th>
        </tr>
 </tfoot>
</table>

У меня есть источник данных json с данными, которые выглядят следующим образом (я немного украсил его для отображения здесь, но файл представляет собой одну длинную строку без разрывов строк).

{"data":[{"street":"19 Brook Avenue","city":"PASSAIC","state":"NJ","postcode":"07055"},
{"street":"27 Brook Avenue","city":"PASSAIC","state":"NJ","postcode":"07055"},
{"street":"31 Brook Avenue","city":"PASSAIC","state":"NJ","postcode":"07055"},
{"street":"35 Brook Avenue","city":"PASSAIC","state":"NJ","postcode":"07055"},
{"street":"39 Brook Avenue","city":"PASSAIC","state":"NJ","postcode":"07055"},
{"street":"49 Brook Avenue","city":"PASSAIC","state":"NJ","postcode":"07055"}]}

Наконец, я загружаю его в свою функцию готовности документа:

<script type="text/javascript">
    $(document).ready(function(){
        $("#tblAddresses").DataTable({
            "ajax" : {
                "url" : "/json/07055.json",
                "columns" : [{"data":"street"},
                             {"data":"city"},
                             {"data":"state"},
                             {"data":"postcode"}]
            }
        });
    });
</script>

Когда я загружаю страницу, я вижу вызов ajax. Я вижу данные, принятые браузером, но DataTables выдает ошибку:

Предупреждение DataTables: table id = tblAddresses - Запрошенный неизвестный параметр '0' для строки 0, столбца 0.

Раньше я много раз работал с ajax, хотя никогда не загружался из статического файла данных. Не могу найти ошибку в JSON или Javascript.

0
Menachem Bazian 7 Июл 2017 в 14:50

1 ответ

Лучший ответ

Вы неправильно связываете данные. Вам нужно связать столбцы после метода ajax, как показано ниже,

$("#tblAddresses").DataTable({
        "ajax" : {
            "url" : "/json/07055.json",
            "type": "Get"
        }, //Here end of ajax method. Now you can bind the columns
         "columns" : [{"data":"street"},
                      {"data":"city"},
                      {"data":"state"},
                      {"data":"postcode"}]
        });

Надеюсь, это поможет!

2
Basanta Matia 7 Июл 2017 в 15:44
1
Я ЗНАЛ, что это была что-то глупое, но не мог этого видеть! БЛАГОДАРНОСТЬ!
 – 
Menachem Bazian
7 Июл 2017 в 15:50