Jquery и Bootstrap 4 dataTable удалить строку на странице 2 не работает

0

Добрый день! У меня есть jquery и bootstrap 4 datatable с разбивкой по страницам и кнопка удаления в каждой строке, но после того, как страница 1 заполнена данными, она перейдет на страницу 2. Проблема состоит в том, что данные на странице 2 с кнопкой строки удаления не работают, но на стр. 1 кнопка удаления работает отлично..

Вот мой код таблицы:

<table class="table table-hover table-bordered" id="questionTable">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Student</th>
                                        <th>Subject Code</th>
                                        <th>Semester</th>
                                        <th>SchoolYear</th>
                                        <th>Professor</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php  while ($row = $result -> fetch_object()): ?>
                                    <tr>
                                        <td><?php echo  $row->Subject_Student_Taken;?></td>
                                        <td><?php echo $row-> Student_ID;?></td>
                                        <td><?php echo $row-> Subject_Code;?></td>
                                        <td><?php echo $row-> Term_Name;?></td>
                                        <td><?php echo $row-> SY_Name;?></td>
                                        <td><?php echo $row-> Faculty_ID;?></td>
                                        <td class="text-center">
                                            <a  class="btn btn-sm btn-outline-primary text-muted" href="SubjectTaken_edit.php?Subject_Student_Taken=<?php echo $row->Subject_Student_Taken;?>">Edit</a>

                                            <a  data-fid="<?php echo  $row->Subject_Student_Taken;?>" title="Delete Faculty" data-toggle="modal" data-target="#delete_modal"  class="btn btn-sm btn-outline-danger delete-faculty-btn text-muted" >Delete</a>
                                        </td>
                                    </tr>
                                    <?php endwhile; ?>

                                </tbody>
                            </table>

Здесь мой код удаления:

if(!empty($_POST['delete'])) { 
            $id = $_POST['delete']; 
            $data->delete_StudentTakenHandle($id, $conn); 

         }

Код функции:

 function delete_StudentTakenHandle($id, $conn){
        $sql = "DELETE FROM subject_taken_handle WHERE Subject_Student_Taken=? ";
        $stmt = $conn->prepare($sql);
        $stmt->bind_param("i", $id);
        $stmt->execute();    
    }

Модальный код:

<div class="modal fade" id="delete_modal" role="dialog">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <!-- Modal Header -->
                          <div class="modal-header">
                            <h4 class="modal-title">Delete Confirmaiton</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                          </div>
                          <!-- Modal body -->
                          <div class="modal-body">
                            <div class="alert alert-danger" role="alert">
                              Are you sure you want to delete selected record?
                            </div>
                          </div>
                          <!-- Modal footer -->
                         <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                        <input type="hidden" name="delete"  id="row-id-to-delete">
                        <button type="submit" class="btn btn-danger" >Yes</button>
                      </div>
                        </div>
                      </div>
                    </div>

И вот мой код jquery:

<script>

        $('.delete-faculty-btn').on('click',function(){
         $("#row-id-to-delete").val($(this).data('fid'));

    });



</script>
  • 0
    Какая версия jQuery?
  • 0
    это jquery-3.2.1
Показать ещё 1 комментарий
Теги:
modal-dialog

2 ответа

1

Вероятность ошибки, скорее всего, вызвана следующим:

только элементы с первой страницы отображаются (существующие), когда вы устанавливаете событие jQuery.
Поскольку функция jQuery.on присоединяет события только к существующим элементам, событие не привязывается к элементам с других страниц.

Решение:

Вы должны использовать событие щелчка таблицы как оболочку для прикрепления событий к кнопкам удаления.

Таким образом, каждый раз, когда вы нажимаете и изменяете страницу, кнопки delete будут существовать, и функция jQuery.on сможет присоединить к ним событие для удаления.

Вы должны обернуть код прикрепления события следующим образом:

$("#questionTable").on("click", ".delete-faculty-button", function(){
   // attach your delete event here
});

Подробнее читайте в документации jQuery.on.

Поделиться
  • 0
    @jerico Этот ответ помог вам решить проблему?
0

Используйте делегированный формат, а не нажмите.. on() | Документация API jQuery

$('.delete-faculty-btn').on('click',function(){
     $("#row-id-to-delete").val($(this).data('fid'));

});

будет выглядеть так:

$(document).on("click", ".delete-faculty-btn", function () {
    $("#row-id-to-delete").val($(this).data('fid'));

        });
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню