У меня есть панель вкладок в моем HTML, где я рендеринг таблицы.
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div role="tabpanel" class="tab-pane" id="manualProcess">
<div class="container" id="annotationTable" class="display nowrap" cellspacing="0" width="100%">
</div>
</div>
Я рендеринг таблицы с помощью сценария php из MySQL. Функция getManual () срабатывает при нажатии на панель вкладок.
function getManual() {
var folder = $('#workingDir').val();
$.post('manualAnnotation.php', {'folder': folder}, function(data) {
$('#annotationTable').html(data).show();
})
}
И мой php, который отображает таблицу, выглядит следующим образом:
$result = mysqli_query($connect,$sql)or die(mysqli_error());
echo "<div class='col-md-5'><table class='dataTable' cellspacing='0' id='manTab'>";
echo "<thead><tr><th>Select</th><th>Image</th><th>Location</th><th>Brand</th><th>Run</th></tr></thead>";
while($row = mysqli_fetch_array($result)) {
$ID = $row['ID'];
$Image = $row['Image'];
$Location = $row['Location'];
$Brand = $row['Brand'];
echo "<tbody><form><tr>
<td><div class='radio' style='padding:0px;margin:0px'><label><input type='radio' value='$ID' id='manualTab' name='manualTab'></label></div></td>
<td>".$Image."</td>
<td>".$Location."</td>
<td>".$Brand."</td>
<td><a href='#' onclick='runManual()'>RUN</a></td>
</tr></tbody></form>";
}
echo "</table></div>";
mysqli_close($connect);
Я пытаюсь включить dataTable jQuery для таблицы с именем «manTab». На моей странице индекса я добавил этот код:
$(document).ready(function() {
$('#manTab').DataTable({
});
});
Несмотря на то, что при этом в таблице отображаются такие функции, как поиск, сортировка или разбиение на страницы, не включены.
Вы пытаетесь преобразовать таблицу, которая еще не закончила рендеринг (из запроса).
function getManual() {
var folder = $('#workingDir').val();
$.post('manualAnnotation.php', {'folder': folder}, function(data) {
$('#annotationTable').html(data).show();
$('#manTab').DataTable(); //place here
});
}
выше будет работать, если у вас есть несколько строк в вашей таблице. но если у вас есть тысячи или больше. вам нужно использовать функцию обратного вызова / обещание, чтобы дождаться окончания обработки таблицы.
function getManual() {
var folder = $('#workingDir').val();
$.post('manualAnnotation.php', {'folder': folder}, function(data) {
$('#annotationTable').html(data).show();
}).done(function(){
$('#manTab').DataTable(); //place here
});
}
Вы можете расположить отдельный компонент в зависимости от конфигурации.
$(document).ready(function() {
$('#example').DataTable( {
"dom": '<"top"i>rt<"bottom"flp><"clear">'
} );
} );
Заглянуть в официальная документация для более подробной информации
l - length changing input control
f - filtering input
t - The table!
i - Table information summary
p - pagination control
r - processing display element