Question

我通过datatable.js生成带有日期时间单元格的表。借助datatables库的分页功能，该表被分成几页。

由于使用了datetimepicker，我实现了Datetimepicker-bootstrap V4以便能够修改每个字段中的日期数据。

无论何时生成表，一切都可以正常工作，我可以通过单击每个单元格并很好地显示datetimepicker。

另一方面，当我通过单击分页栏的按钮2来更改页面时，我的表可以正确显示，但是datetimepicker不再需要显示。除第一页可以正常工作外，其他所有页面都一样。

您能帮我在每个页面的每个单元格上显示datetimepicker吗？

我的表（控制器）的生成脚本

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>

我的页面截图

Bootrap datetimepicker无法与datatables.js配合使用

0 个答案: