Bootrap datetimepicker не работает с datatables.js

Question

Я генерирую через datatable.js таблицу с ячейками даты и времени.эта таблица разделена на несколько страниц благодаря функции разбивки на страницы библиотеки данных.

Я реализовал Datetimepicker-bootstrap V4, чтобы иметь возможность изменять данные даты в каждом поле благодаря datetimepicker.

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

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

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

сценарий генерациимой стол (контроллер)

static public function createTableQalEventsLogs(){

    // set variable;
    $go1=array('0'=>'GO',"1"=>"1");
    $go2=array('0'=>'GO2',"1"=>"5");
    $go3=array('0'=>'GO3',"1"=>"4");
    $go4=array('0'=>'GO4',"1"=>"6");

    $tab=self::getDataFromDb();
    // create table
    echo '<table id="tableQal" class="table table-hover">';
        echo '<thead> <tr>';
            echo '<th>NAME</th>
                  <th>QAL</th>
                  <th>CITY</th>
                  <th>GO1</th>
                  <th>GO2</th>
                  <th>GO3</th>
                  <th>GO4</th>
                  <th>ACTION</th>';
        echo '</tr></thead> ';
        echo '<tbody>';
        foreach ($tab as $k => $qals) {

            // set varible for rowspan in element [rows]
            $rowspan = $qals['rows'];

            // destroy element ['rows']
            unset($qals['rows']);

            //set the variable to find out if this is the first TD for the rowspan
            $first = true;
            foreach ($qals as $kqal => $cities) {
                foreach ($cities as $city => $details) {
                    echo '<tr>';

                        echo "<td>$k</td>";
                        echo "<td>$kqal</td>";
                        echo "<td>$city</td>";

                        //Assign time data to the right place
                        $temp = array_replace(
                                    [
                                        $go1[0] => '',
                                        $go2[0] => '',
                                        $go3[0] => '',
                                        $go4[0] => ''
                                    ],
                                    array_column($details, 'time', 'evnet')

                                );

                        //Assign id of time data to the right place
                        $temp2 = array_replace(
                                    [
                                        $go1[0] => '',
                                        $go2[0] => '',
                                        $go3[0] => '',
                                        $go4[0] => ''
                                    ],
                                    array_column($details, 'id', 'evnet')

                                );

                        // merge the 2 arrays
                        $tempmerge=array_merge_recursive($temp,$temp2);

                        // build td with data time
                        foreach ($tempmerge as $key=>$val) {

                            // set variable idevent with id_event for id input
                            switch ($key) {

                                // open ticket deploy
                                case $go1[0]:
                                    $idevent=$go1[1];
                                    break;

                                // close ticket deploy
                                case $go2[0]:
                                    $idevent=$go2[1];
                                    break;;

                                // post go  
                                case $go3[0]:
                                    $idevent=$go3[1];
                                    break;

                                // close ticket remove
                                case $go4[0]:
                                    $idevent=$go4[1];
                                    break;
                            }

                            // build variable idtd with all information for recording data in base
                            if($val[1]){ $idtd=$val[1];}
                            else{
                                if($kqal){
                                    $idtd=$k."_".$kqal."_".$city."_".$idevent;}
                                else{$idtd=$k."_null_".$city."_".$idevent;}
                            }
                            ?>
                            <td>
                                <input class="dateQalPicker" onchange="is_valid_blue(this,'<?php echo $val[0]; ?>')" type="text" value="<?php echo $val[0]; ?>" id="<?php echo $idtd ?>" style="border:none" />
                            </td>
                        <?php
                        }
                        ?>
                        <td><button type='button' class='btn btn-danger btn-xs' onclick='confirmDelete("<?php echo $k ?>", "<?php echo $kqal; ?>", "<?php echo $city ?>");' >Delete</button></td>
                        <?php
                    echo '</tr>';
                }
            }
        }
    echo '</tbody>';
echo '</table>';

}
}

Просмотры страниц

    require_once('controllers/QalEventsLogsController.php');

?>
<!-- Call datatable librairy -->

<script type="text/javascript" src="assets/bootDatepicker/moment.js"></script>
<script type="text/javascript" src="assets/bootDatepicker/bootstrap-datetimepicker.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        // draw table evvents logs
        drawTableQalEventsLogs();

        $('.dateQalPicker').datetimepicker({
            format:"YYYY-MM-DD HH:mm:ss"
        });

    });

    function toto (elt) {
    $('#'+elt.id).datetimepicker({
        format:"YYYY-MM-DD HH:mm:ss"
    });
    console.log('#'+elt.id);
}

</script>


<div class="row">
    <div class="col-md-6">
        <h1>Qal Events Logs</h1>
        <h4 type="text" value="">Editable data table for Qal life statistics</h4>
    </div>
</div>
<div class="row" style="display: flex;align-items: center;">
    <div class="col-md-2">
        <button type="submit" align="right" class="btn btn-default" id="launch_refresh"  name="launch_refresh" onclick="launch_updateWebService();">Update webservice data</button>
    </div>
    <div class="col-md-10">
        <i  class="fa fa-refresh fa-spin" id="loading_delete_qal" style="display:none;font-size:24px;"></i>
        <div id="msg-success" class="col-md-9" style="display:none; margin-top:5px">
            <i class="fa fa-check-circle" style="font-size:24px;color:green;float:left; clear:both"></i>
            <div id="debugBox" style="color:green; font-weight:400; margin-left:30px"></div>
        </div>  
        <div id="msg-err" class="col-md-9" style="display:none; margin-top:5px">
            <i class="fa fa-exclamation-triangle" style="font-size:24px;color:red;float:left; clear:both"></i>
            <div id="debugBox_err" style="color:red; font-weight:400; margin-left:30px"></div>
        </div>
    </div>
</div>
<br>
<br>

<!--  table with all events logs -->
<div id="divQaleventslogs">
    <?php QalEventsLogsController::createTableQalEventsLogs(); ?>
</div>

<div>
    <button type="button" class="btn btn-success" onclick="saveQalEevntslogs();">Save</button>
</div>
<div class="loading">
    <div class="loader"></div>
</div>

снимок экрана моей страницы