jQuery DataTables «Нет данных, доступных в таблице»

У меня есть таблица, которая выполнена в функции $(document).ready. Я также использую плагин jQuery DataTables. По какой-то причине, когда страница загружается, таблица загружается, но первая строка говорит «Нет данных, доступных в таблице».jQuery DataTables «Нет данных, доступных в таблице»

HTML

<head> 
<link rel="stylesheet" type="text/css" href="/path/to/css/jquery.dataTables.css"> 
<script type="text/javascript" charset="utf8" src="/path/to/js/jquery.dataTables.js"></script>

</head> 

<div class="col-sm-12" id="ovs-sum"> 
<table class="table table-striped" id="summary-table"> 
    <thead> 
     <tr> 
      <th>Order</th> 
      <th>Planner</th> 
      <th>Vendor</th> 
      <th>SKU</th> 
      <th>Description</th> 
      <th>Quantity</th> 
      <th>PO Date</th> 
      <th>PO Tracking</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 
</div>

JS/JQuery (scripts.js)

$ (document).ready(function() { 
    $.ajax({ 
     type: 'GET', 
     url: 'models/summary.php', 
     mimeType: 'json', 
     success: function(data) { 
      $.each(data, function(i, data) { 
       var body = "<tr>"; 
       body += "<td>" + data.name + "</td>"; 
       body += "<td>" + data.address + "</td>"; 
       body += "<td>" + data.phone_no + "</td>"; 
       body += "<td>" + data.birthday + "</td>"; 
       body += "<td>" + data.color + "</td>"; 
       body += "<td>" + data.car + "</td>"; 
       body += "<td>" + data.hobbies + "</td>"; 
       body += "<td>" + data.relatives + "</td>"; 
       body += "</tr>"; 
       $(body).appendTo($("tbody")); 
      }); 
     }, 
     error: function() { 
      alert('Fail!'); 
     } 
    }); 

    /*DataTables instantiation.*/ 
    $("#summary-table").DataTable(); 
}

lso, если я нажимаю на стрелки сортировки в заголовках столбцов, все мои данные исчезают, и я просто остаюсь с заголовками столбцов и «Нет данных в таблице».

Эта проблема существует в IE, Chrome и FireFox. Вот что я пробовал до сих пор:

-Проанализировал размещение $("#summary-table").DataTable(); перед вызовом AJAX. Это не сработало.

-Я попытался заменить $(body).appendTo($("tbody")); на $ ("tbody") .append (body); `. Это не сработало.

-I googled. Многие вопросы SO и другие сайты, у которых есть эта проблема, имеют решение, связанное с плохой структурой таблицы, но я не могу найти, где моя структура таблицы идет не так. Смотря в элемент проверки, у него есть мои добавленные строки, плюс куча HTML, который производит DataTables. В консоли нет ошибок.

Как я могу заставить DataTables работать с моими текущими данными? Какие возможные ошибки я пропускаю?

источник

2015-09-29 aCarella

Пожалуйста, попробуйте запустить dataTable после того, как загруженная вами таблица AJAX будет добавлена в тело.

$ (document).ready(function() { 
$.ajax({ 
    type: 'GET', 
    url: 'models/summary.php', 
    mimeType: 'json', 
    success: function(data) { 
     $.each(data, function(i, data) { 
      var body = "<tr>"; 
      body += "<td>" + data.name + "</td>"; 
      body += "<td>" + data.address + "</td>"; 
      body += "<td>" + data.phone_no + "</td>"; 
      body += "<td>" + data.birthday + "</td>"; 
      body += "<td>" + data.color + "</td>"; 
      body += "<td>" + data.car + "</td>"; 
      body += "<td>" + data.hobbies + "</td>"; 
      body += "<td>" + data.relatives + "</td>"; 
      body += "</tr>"; 
      $("#summary-table tbody").append(body); 
     }); 
     /*DataTables instantiation.*/ 
     $("#summary-table").DataTable(); 
    }, 
    error: function() { 
     alert('Fail!'); 
    } 
}); 
});

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

источник

2015-09-29 19:52:38

Отлично! Но почему? Позаботьтесь указать мне в направлении, где я могу прочитать, почему это работает? Удивительное решение! – aCarella

Abhjeet, не могли бы вы объяснить, как это работает. NONE из примеров на datatables.net структурированы следующим образом. Благодаря! – paparush

Это работает, потому что перед тем, как плагин 'DataTables 'получает инициализацию, ему нужна таблица с данными, содержащимися в DOM. То же самое относится и к другим JS-плагинам. Прежде чем вы начнете подключать плагин на любом селекторе DOM, этот селектор должен присутствовать там с соответствующими данными. Существует еще один способ работы с «DataTables», который связан с запросами на стороне сервера из плагина DataTables.Этот способ будет вашим единственным выбором, когда у вас будет огромное количество данных для заполнения таблицы. Для справки: [вызовы на стороне сервера] (https://www.datatables.net/examples/server_side/simple.html) –

При загрузке данных через AJAX в DataTable используйте API-интерфейс row.add() DataTable, как описано в документе here.

В своем ответе AJAX (предполагая, что вы инициировали DataTable под названием MYTABLE):

$.each(data, function(i, data) { 
    myTable.row.add([data.name, data.address,...]); 
}); 

myTable.draw();

Я считаю этот метод проще, потому что не нужно строить HTML - я могу просто передать массив данных метод row.add() в моем объекте DataTable.

источник

2016-05-25 19:47:40

jQuery DataTables «Нет данных, доступных в таблице»

ответ

Смежные вопросы