Добавить Bootstrap таблицу с сортировкой, поиском и поиском по страницам в мою функцию PHP - PullRequest
Новая
       1

Добавить Bootstrap таблицу с сортировкой, поиском и поиском по страницам в мою функцию PHP

0 голосов
/ 28 февраля 2020

У меня проблема с добавлением в мою таблицу bootstrap Таблицы с сортировкой, поиском и поиском по страницам, ниже приведена моя оригинальная кодировка: 

<div class="data-content">
<span>REPORT SELECTION</span>
<div class="data-table" id="tableData">
<?php
$qry="select id, name, identity, created, payOption, amount, receivedBy from payment" ;
$result = mysqli_query($conn,$qry);

if ($result->num_rows > 0) {
    echo "<table id='dataTable'><tr><th>Payer</th><th>Passport/IC No</th><th>Date Paid</th><th>Payment Type</th><th>Payment Amount</th><th>Received by</th><th>Payment Receipt</th></tr>";

    while($row = $result->fetch_assoc()) {
        echo "<tr id=".$row["id"]."><td>".$row["name"]."</td><td>".$row["identity"]."</td><td>".$row["created"]."</td><td>".$row["payOption"]."</td><td>".$row["amount"]."</td><td>".$row["receivedBy"]."</td><td><a href='invoice.php' onclick='sessionFunction(".$row["id"].")'>View</a></td></tr>";
    }
    echo "</table>";
} else {
}
?>
</div>
</div>

Исходный вывод показывает мне, как показано ниже: Output

То, что я пробовал код

Я пытался добавить это в мой код выше, но не сработало. 

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" 

href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<script type="text/javascript" 

src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" 

src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

И я попытался добавить функцию сценария 

<script>
$(document).ready(function(){
    $('#myTable').dataTable();
});
</script>

И я попытался изменить echo "<table id='dataTable'> на эхо "также не сработало.

Надеюсь, кто-нибудь поможет мне, как работать спасибо.

На самом деле, я хочу вывод таблицы с сортировкой, поиском и поиском по страницам, как показано в следующем примере:

Output2

1 Ответ

0 голосов
/ 28 февраля 2020

Если идентификатор вашей таблицы равен dataTable, тогда ваш JS должен быть .. 

<script>
$(document).ready(function(){
    $('#dataTable').DataTable();
});
</script>

.. в соответствии с Нулевая конфигурация Примеры таблиц данных

...