Я использую обработку на стороне сервера DataTables . Кажется, что все работает нормально, используя Firefox. Однако при просмотре таблицы с использованием Chrome ни одна строка не отображается, а метка состояния DataTable «Обрабатывается ...» не очищается. Заголовок, нижний колонтитул и имена столбцов таблицы показаны, но без строк.
В Chrome, если я щелкну правой кнопкой мыши по таблице, выберите элемент Inspect и выберите Console. Я не вижу ошибок, предупреждений или журналов.
Весь HTML-код для таблицы выглядит правильно, похоже, проблема в том, что DataTables ничего не поместил между тегами.
Есть ли какой-нибудь журнал, который я мог бы просмотреть, или инструмент, который я мог бы использовать для получения дополнительной диагностической информации?
Что помешает DataTables добавить то, что он получил из записи JSON в секцию tbody?
Я только начал использовать Javascript, Jquery и DataTables пару дней назад и не уверен, как отследить проблему и решить ее. Некоторые указатели будут оценены.
Вот мое объявление DataTable:
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
var oTable = $('#cars-table').dataTable({
"bAutoWidth": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bStateSave": true,
"bServerSide": true,
"sAjaxSource": "/cars/get_cars_list/",
"iDisplayLength": 10,
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push({ "name": "where_select_box", "value": $("#select_box option:selected").val() } );
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
});
},
"aoColumnDefs": [
{ "aTargets": [0], "bVisible": false, "bSearchable": false},
{
"aTargets": [1],
"fnRender": function ( oObj ) {
return '<a href=\"/cars/' + oObj.aData[0] + '/\">' + oObj.aData[1] + '</a>';
},
"bSearchable": true,
},
{ "aTargets": [2], "bSearchable": true},
{ "aTargets": [3], "bSearchable": false, "sType": 'date'},
{ "aTargets": [4], "bSearchable": false},
{ "aTargets": [5], "bSearchable": false},
]
});
/* Select box */
$('#select_box').change(function() {
// Reload data based on choice
oTable.fnDraw();
});
} );
/* ]]> */
</script>
Если я запускаю Firebug, консоль показывает данные, возвращаемые в виде структуры данных JSON, но эти данные никогда не отображаются в Chrome, а в Firefox.
Вот перенастроенный JSON (данные немного изменились как конфиденциальный клиент)
{
"sEcho": 1,
"iTotalRecords": 1049,
"iTotalDisplayRecords": 1049,
"aaData":[
[
"1",
"car1",
"Ford",
"2",
"2011-12-18",
"159",
]
,
[
"2",
"car2",
"BMW",
"2",
"2011-12-18",
"159",
]
,
.
.
.
]
}
Вот HTML-код таблицы, когда я делаю «Просмотр исходного кода» - как вы можете видеть, tbody пуст.
<div style="width:75%;">
<div class="demo_jui">
<table id="cars-table" style="width:100%;" class="display" id="example">
<thead>
<tr class="gradeA">
<th>
ID
</th>
<th>
Name
</th>
<th>
Manufacturer
</th>
<th>
Size
</th>
<th>
Date
</th>
<th>
Days
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>