Блог

У меня есть панель с вкладками, на каждой панели есть список таблиц данных с кнопками для редактирования или удаления каждой отдельной строки в таблицах. Под изображением первой панели сразу после загрузки страницы

Ниже на другой панели, выбранной

Каждая кнопка редактирования действий должна открывать модальную форму для редактирования данных строк в таблицах данных, но они не работают. Я имею в виду, что просто кнопка редактирования действий на первой базовой панели работает нормально…кнопки на другой панели с вкладками не открывают модальные. Только кнопка Добавить серую в каждой панели может открыть модальную … и я думаю, что это связано с тем, что серые кнопки «Добавить» являются статическими … не динамически создаваемыми вызовом AJAX, как строки в таблицах данных.

Я схожу с ума, чтобы понять, как можно исправить эту странную проблему.

Ниже HTML-код для создания страницы (просто фрагмент HTML для каждой панели с вкладками):

 <!-- Register pane content -->
<div class="tab-pane" id="register-tab">
    <div class="row">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table table-sm table-bordered mb-0" id="register-table">
                    <thead class="thead-light">
                        <tr>
                            <th>Registration</th>
                            <th>CofR</th>
                            <th>From</th>
                            <th>To</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </div>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-right">
        <button type="button" id="add-registration-button" class="btn btn-secondary btn-sm waves-effect waves-light mt-2">Add Registration</button>
        </div>
    </div>
</div>
 

Код jQuery для загрузки таблицы данных выглядит следующим образом:

 //Ajax datatables
var registerTable = $('#register-table').DataTable({ 
    responsive: true,
    autoWidth: false,
    searchDelay: 500,
    processing: true,
    serverSide: true,
    stateSave: true,
    paging: false,
    ordering: false,
    info: false,
    searching: false,
    ajax: {
        url: controller_url   '/get_aircraft_registrations/'   aid,
        type: "GET",
    },
    columns:  [
        { data: "registration" },
        { data: "cor" },
        { data: "registerDate" },
        { data: "cancDate" },
        { data: "action", responsivePriority: -1 },
    ], 
    createdRow: function ( row, data, index ) {
        $( row ).find('td:eq(3)').attr('data-id', data.id);
    },
    columnDefs: [
        {
            targets: -1,
            title: 'Actions',
            orderable: false,
            searchable: false,
            render: function(data, type, full, meta) {
                return `
                <td>
                    <div class="button-list">
                    <button type="button" class="btn btn-xs btn-info waves-effect waves-light"><i class="mdi mdi-pencil edit-registration"></i></button>
                    <button type="button" class="btn btn-xs btn-danger waves-effect waves-light"><i class="mdi mdi-close remove-registration"></i></button>
                    </div>
                </td>`;
            },
        },
        {
            targets: [ 1, 2, 3 ],
            orderable: false,
            searchable: false,
        },
    ],
});
 

Я думаю, что наиболее важной частью кода jQuery является следующая: открывать модальные при нажатии каждой кнопки

 $("body").on("click",".button-list .actions",function(e){
    var $btn = $(this);
    
    var id = $btn.closest('td').data('id');
    
    if(id != null) {
        e.preventDefault();
       
        if($btn.hasClass("edit-base")) {
            console.log('you want to edit base with id '   id);
            editBase(id);
        }
       
        if($btn.hasClass("remove-base")) {
            console.log('you want to remove base with id '   id);
            deleteBase(id);
        }
    }
});

function editBase(id){
    console.log(`Editing base with id ${id}`);
   
    $('#baseModal').modal('show');
}
 

Большое спасибо за помощь

Попробуйте добавить InitComplete при инициализации datatable.

 "initComplete":function( settings, json){
    $("body").on("click",".button-list .actions",function(e){
       var $btn = $(this);
    
       var id = $btn.closest('td').data('id');
    
       if(id != null) {
          e.preventDefault();
       
          if($btn.hasClass("edit-base")) {
            console.log('you want to edit base with id '   id);
          }
       
          if($btn.hasClass("remove-base")) {
            console.log('you want to remove base with id '   id);
          }
       }
    });
 }
 

Вы можете поместить свою функциональность нажатия кнопки в InitComplete, чтобы после рендеринга всех данных в таблице данных она инициализировалась рядом с кнопкой.