Я использовал jquery и bootstrap datatable, и он работал нормально до тех пор, пока не потребовалась следующая страница, когда данные в таблице больше 5, она перестала работать.
Рабочий процесс: См. Приложенный скриншот. Синяя ссылка слева с номером открывает модальное окно, в котором отображаются остальные данные. Модальное окно работает с первыми 5 записями, но когда я перехожу на следующую страницу или показываю данные более 5, скрипт по какой-то причине прерывает модальное окно, события щелчка редактирования или удаления не работают.
Используемые ссылки CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
Код для таблицы
<table id="table_details" class="table table-sm table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Policy Number</th>
<th scope="col">Registration</th>
<th scope="col">Insured Name</th>
<th scope="col">Contact</th>
<th scope="col">Case Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody id="table_data">
<?php
for ($i = 1; $i <= $rowcount; $i++) {
$ticketdata = mysqli_fetch_array($ticketresults); ?>
<tr>
<input type="hidden" id="dataid" name="dataid" value="<?php echo $ticketdata['id'] ?>">
<th scope="row">
<a href="#" id="<?php echo $ticketdata['ticketnumber']; ?>" class="view_data" data-toggle="tooltip" data-placement="left" title="View Details" /><?php echo $ticketdata['ticketnumber']; ?> </a>
</th>
<td><?php echo $ticketdata['policynumber'] ?></td>
<td><?php echo $ticketdata['registration_number'] ?></td>
<td><?php echo $ticketdata['insuredname'] ?></td>
<td><?php echo $ticketdata['contactnumber'] ?></td>
<td><?php echo $ticketdata['casestatus'] ?></td>
<td>
<button type="button" class="editticket" id="<?php echo $ticketdata['id'] ?>" data-toggle="tooltip" data-placement="left" title="Edit Details"><i class="fa fa-pencil"></i></button>
<button class='deletedata' id='<?php echo $ticketdata['ticketnumber'] ?>' data-toggle="tooltip" data-placement="right" title="Delete Record" /><i class="fa fa-trash-o"></i></button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
jQuery Код для просмотра в модальном режиме
$('.view_data').click(function() {
var ticket_id = $(this).attr("id");
$.ajax({
url: "./posters/viewdata.php",
method: "POST",
data: { ticket_id: ticket_id },
success: function(data) {
$('#ticketsummary').html(data);
$('#dataModal').modal("show");
}
});
});
Скриншот таблицы Щелчок по выделенному URL-адресу не работает