Включить jQuery datatable для рендеринга таблицы php с функциями поиска и сортировки

У меня есть панель вкладок в моем 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({
});
});

Несмотря на то, что при этом в таблице отображаются такие функции, как поиск, сортировка или разбиение на страницы, не включены.

0

Решение

Вы пытаетесь преобразовать таблицу, которая еще не закончила рендеринг (из запроса).

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
});
}
1

Другие решения

Вы можете расположить отдельный компонент в зависимости от конфигурации.

$(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
0

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector