Как реализовать или исправить уже существующий вывод данных из БД в таблицу HTML?

Question

[Galdar Turin]

Возникла потребность сделать вывод из БД в HTML таблицу, так сказать что-то вроде кнопки обновить - список данных в блице. И тут не понятные траблы. Он обновляет, но после нажатия кнопки перестает все работать (все это другие кнопки "редактирования", "удаления", "добавления"). Может кто-то сталкивался или просто знает как правильно сделать такое обновление HTML таблицы?!

Вывод из бд в HTML

require_once'_variables.php';
require_once'_mysql.php';

$result = new baseConnect();

$table          =   '';
$r              =   '';
$arrEmployee    =   [];
$i              =   0;
$res = $result::connectTables("SELECT id, email, name, login, name_role, date_regist, date_input, date_output FROM "._TABLE_STAFF_);
while( $e = mysqli_fetch_assoc($res) ) {
    $arrId = $e['id'];
    $arrEmail = $e['email'];
    $arrName = $e['name'];
    $arrLogin = $e['login'];
    $arrNameRole = $e['name_role'];
    $arrDateReg = $e['date_regist'];
    $arrDateInp = $e['date_input'];
    $arrDateOut = $e['date_output'];
    $i++;
    $arrEmployee[$i] = [$arrId,$arrEmail,$arrName,$arrLogin,$arrNameRole,$arrDateReg,$arrDateInp,$arrDateOut];

}

foreach ($arrEmployee as $key => $value) {
    $t = '<td>'.$value[0].'</td>'.
    '<td>'.$value[1].'</td>'.
    '<td>'.$value[2].'</td>'.
    '<td>'.$value[3].'</td>'.
    '<td>'.$value[4].'</td>'.
    '<td>'.$value[5].'</td>'.
    '<td>'.$value[6].'</td>'.
    '<td>'.$value[7].'</td>'.
    '<td><a id="'.$value[0].'" class="editing" href="#"><i class="ion-compose"></i></a></td>'.
    '<td><a id="'.$value[0].'" class="removal" href="#"><i class="ion-close-round"></i></a></td>';
    $table.='<tr>'.$t.'</tr>';
}


$out = json_encode(array(
   table => $table,
));
echo $out;
$arrEmployee    =   [];
$result::MySQLClose();

кнопка обновления

$('#updateTableEmployee').on('click', function(){
        $.ajax({
            type: 'POST',
            url: 'table-employee.php',
            success:function(response){
                data = JSON.parse(response);
                $('#table-employee_manager').html(data['table']);
            }
        });
    });

HTML верстка

<div class="dt-responsive table-responsive">
                                    <table id="simpletable" class="table table-striped table-bordered nowrap">

                                        <script>                                        
                                                document.addEventListener('DOMContentLoaded', function() {
                                                    $.ajax({
                                                        type: 'POST',
                                                        url: 'table-employee.php',
                                                        data: {

                                                        },
                                                        success:function(response){
                                                            data = JSON.parse(response);
                                                            $('#table-employee_manager').html(data['table']);
                                                        }
                                                    });
                                                }, false);
                                        </script>

                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>E-mail</th>
                                                <th>Имя и Фамилия</th>
                                                <th>Login</th>
                                                <th>Роль</th>
                                                <th>Дата регистрации</th>
                                                <th>Дата входа</th>
                                                <th>Дата выхода</th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                        </thead>

                                        <tbody id="table-employee_manager"></tbody>

                                    </table>
                                    
                                </div>

                                <div class="row">
                                    <label class="col-sm-2"></label>
                                    <div class="col-sm-12">
                                        <a id="updateTableEmployee" class="btn btn-default">Обновить</a>
                                        <a id="createEmployee" class="btn btn-success m-b-0 waves-effect waves-light js-programmatic-enable">Добавить</a>
                                    </div>
                                </div>

Answer 1

[Gip]

а где у вас на это назначаются слушатели нажатия? не увидел.
кроме того их при каждой перезагруге аяксом придется переназначать т.к. это новые контролы, либо генерите ссылки обычные в href

'<td><a id="'.$value[0].'" class="editing" href="#"><i class="ion-compose"></i></a></td>'.
    '<td><a id="'.$value[0].'" class="removal" href="#"><i class="ion-close-round"></i></a></td>';

Comments

[Galdar Turin]

Я так понял про слушателей это от оно...

слушатели нажатия

// Редактировать
    $("td a.editing").on("click", function(){
        id = $(this).attr("id");
        $("#blockDataRemoval,#blockCreateEmployee").hide();
        $("#blockDataСhange").show();
        ....
    //Добавить
    $("#createEmployee").on("click", function(){
        $("#blockDataRemoval,#blockDataСhange").hide();
        $("#blockCreateEmployee").show();
    });
    //Удалить
    $("td a.removal").on("click", function(){
        id = $(this).attr("id");
        $("#blockCreateEmployee,#blockDataСhange").hide();
        $("#blockDataRemoval").show();
       ....

А это я понял в то же время и не понял))))

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

У меня считывает назначенный ID (он индивидуале)! После считывания ищет в БД по ID и удаляет или редактирует!

[Gip]

Galdar Turin,

А это я понял в то же время и не понял))))

Ну, тут смотрите что происходит. Вы когда перерисовываете свою табличку всё вот это нужно проделывать заново, т.е. подгружайте вместе с ней и эти скрипты в $(document).ready
Иначе вновь отрисованные ваши элементы уже не имеют события click. Его надо переназначать каждый раз при перерисовке.

[Galdar Turin]

Giperoglif, аааа, окей, благодарю, щас попробую