回显输出 table 数据，从 mysql 到 ajax 分页到 div 模态 bootstrap [已解决]

Question

现在我正在创建一个连接到 mysql 数据库的小测验 Web 应用程序，一切顺利.. 直到有一个问题来处理 create table inside modal pop up.. 当我将整个 table 放入 div class="modal-body" 时，它的显示在主页上（在模态后面）不在模态内。

由于我遇到了上面的问题，我使用不同的方法来创建 table，在整个网络论坛上进行 reasearc 之后，还有另一种创建 table 而不使用 table 的方法] 标签，它说我们可以使用 div 来创建 table。它确实并且运作良好。 table 显示在模态内部，其中包含来自数据库的一些数据。

现在我似乎看到了天堂之门，但是分页阻碍了我，我尝试了一些代码但仍然没有运气，因为我选择了 div table 我不能像数据table那样使用即时table因为它缺少节点（非table节点启动）使用传统方式 url 路径。

所有需要的是每页显示一个带有导航链接的问题（上一个 | 下一个）

如能提供任何帮助，我们将不胜感激

下面是用户登录后应用程序的屏幕截图，它允许用户选择他们准备好进行的测验

而这一个在用户选择测验后的样子提供

正如我们在上图中看到的那样，我如何与可以处理 div table 的分页协作？

下面是来自 quiz.php

的一些代码

<div class="table-container clearfix">
<table id="tableInvoicesList" class="table table-list hidden">
    <thead>
        <tr>
            <th>Upload Modul</th>
            <th>Modul</th>
            <th>Peserta</th>
            <th>Dibuat</th>
            <th>Status</th>
           
        </tr>
    </thead>
    <tbody>
    
            <?php
            
              $sql = $koneksi->query("select * from quiz_list where to_list='$_SESSION[tipe]' order by id_list desc");
              while($data=$sql->fetch_assoc()){                                 
            
            ?>
    
            <tr>
                <td><?php echo date("d-m-Y",strtotime($data['cr_list'])); ?></td>
                <td><?php echo $data['nm_list']; ?></td>
                <td><?php echo $data['to_list']; ?></td>
                <td><?php echo $data['by_list']; ?></td>
                <td>

                <!--
                <a href="?page=quiz&aksi=learn&id=<?php echo $data['kd_list'];?>" class="btn btn-info btn-xs" onclick="return confirm('ANDA YAKIN SUDAH SIAP\n -Isilah soal yg dianggap mudah\n -Pastikan sudah mengusai materi\n -Nilai kelulusan adalah 70');">Mulai Quiz</a>
                
                -->

                
                <!-- Button trigger modal -->
                    <a data-toggle="modal" data-id="<?php echo $data['kd_list'];?>" class="passingID">
                    <button type="button" 
                            class="btn btn-primary btn-sm" 
                            data-toggle="modal" 
                            data-target="#showquiz<?php echo $data['kd_list'];?>">
                    <i class="fas fa-pencil-alt"></i> Quiz
                    </button>
                    </a>

                </td>

             </tr>

            <!-- Modal -->
            <div class="modal fade" 
                 id="showquiz<?php echo $data['kd_list'];?>" 
                 data-keyboard="false" 
                 data-backdrop="static"
                 tabindex="-1" 
                 role="dialog" 
                 aria-labelledby="exampleModalCenterTitle" 
                 aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                
                <div class="modal-content">
                  
                  <div class="modal-header">
                
                    <h5 class="modal-title" id="exampleModalLongTitle"><?php echo $data['nm_list']; ?></h5>
                    
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                
                  </div>
                  
                  <div class="modal-body">
                    <!--
                     <input type="text" class="form-control" name="idkl" id="idkl" value="">
                     -->
                     <style type="text/css">
                        .divTable
                        {
                            display:  table;
                            width:auto;
                            background-color:#eee;
                            border:1px solid  #666666;
                            border-spacing:5px;/*cellspacing:poor IE support for  this*/
                           /* border-collapse:separate;*/
                        }

                        .divRow
                        {
                           display:table-row;
                           width:auto;
                        }

                        .divCell
                        {
                            float:left;/*fix for  buggy browsers*/
                            display: table-cell;
                            width:555px;
                            background-color:#ccc;
                        }
                    </style>

                    <?php 
                        
                        $batas   = 1;
                        $halaman = @$_GET['halaman'];
                            if(empty($halaman)){
                                $posisi  = 0;
                                $halaman = 1;
                            }
                            else{
                                $posisi  = ($halaman-1) * $batas;
                            }

                        $no = $posisi+1;


                        $result = $koneksi->query("select * from bank_soal where kd_list= '$data[kd_list]';");
                        while($tampil = $result->fetch_assoc()){
                        
                    ?>


                     <div class="divTable" id="page<?php echo $no; ?>">
                         <div class="headRow">
                            <div class="divCell"><?php echo $tampil['soal']; ?></div>
                            
                         </div>
                        <div class="divRow">
                            <div class="divCell">001</div>
                            
                        </div>
                        <div class="divRow">
                            <div class="divCell">xxx</div>
                           
                       </div>
                        <div class="divRow">
                            <div class="divCell">ttt</div>
                           
                       </div>

                       <div class="divRow">
                            <div class="divCell">ttt</div>
                           
                       </div>                        

                  </div>

                   <?php $no++; } ?>

                   <hr>
                    <?php

                    $query2     = $koneksi->query("select * from bank_soal where kd_list='$data[kd_list]';");
                    $jmldata    = mysqli_num_rows($query2);
                    $jmlhalaman = ceil($jmldata/$batas);
                    ?>
                    <div class="text-center">
                        <ul class="pagination">
                            <?php
                            for($i=1;$i<=$jmlhalaman;$i++) {
                                if ($i != $halaman) {
                                    echo "<li class='page-item'><a class='page-link' href='index.php?halaman=$i'>$i</a></li>";
                                } else {
                                    echo "<li class='page-item active'><a class='page-link' href='#'>$i</a></li>";
                                }
                            }
                            ?>
                        </ul>
                    </div>
                   
                    

                  </div>
                
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>

                </div>
              </div>
            </div>

            <script>

            function showPages(id){


                var totalNumberOfPages = 1;
                for(var i=1; i<=totalNumberOfPages; i++){

                    if (document.getElementById('page'+i)) {

                        document.getElementById('page'+i).style.display='none';
                    }

                }
                    if (document.getElementById('page'+id)) {

                        document.getElementById('page'+id).style.display='block';
                    }
            };

            </script>

            <script>
                $(document).on("click", ".passingID", function () {
                 var ids = $(this).attr('data-id');
                 $(".modal-body #idkl").val( ids );
                });
           </script>


             <?php } ?>
    </tbody>
</table>
<div class="text-center" id="tableLoading">
    <p><i class="fas fa-spinner fa-spin"></i> Sedang memuat...</p>
</div>

Answer 1

尝试其他方法后，我找到了查看数据的解决方案 table inside modal problem，

所以回到第一个计划，我继续使用 table 标签来创建 table，但不在模态主体内。

我为 ajax 函数创建了另一个文件，以从数据库传递数据并在 table 中显示结果，并使用 id 选择器将其发送到 div，以供将来参考，让我分享这段 ajax 代码

main_modal.php

    <!-- Modal -->
                <div id="dataModal" class="modal fade" data-keyboard="false" data-backdrop="static"> <!--id dataModal wajib -->
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title"><?php echo $data['nm_list'];?></h5>
                        
                        <button type="button" class="close" data-dismiss="modal"> &times;</button>
                    
                      </div>
                      
                      <div class="modal-body" id="quiz_detail">
                      <!--Awal Modal Body-->

                        <!--Akhir Modal Body-->
                      </div>
                    
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        
                      </div>

                    </div>
                  </div>
                </div>

<script>
                    $(document).ready(function () {
                      $('.view_quiz').click(function(){
                        var quiz_id = $(this).attr("id");

                        $.ajax({
                            url:"page/quiz/view_quiz.php",
                            method:"post",
                            data:{quiz_id:quiz_id},
                            success:function(data){
                                $('#quiz_detail').html(data);
                                $('#dataModal').modal("show");

                            }

                        });                     

                      });
                     });

</script>

对于分页，我使用 bootstrap 数据table

<?php

if(isset($_POST["quiz_id"]))
{

    $output  = '';
    $connect = new mysqli("localhost","root","","k3177986_admintugumulyo");
    $query   ="select * from bank_soal where kd_list= '".$_POST["quiz_id"]."'";
    $result  = $connect->query($query);
    $jumlah  = mysqli_num_rows($result);
    $no      = 0;
    $output .='
    <div class ="table-responsive col-md-12">
        <table id="example" class="table table-bordered">
            <thead>
                <tr>
                    <th bgcolor="navy"><font size="2" face="verdana" color="white">SOAL</font></th>
                </tr>
            </thead>
            <tbody>';
    while($row = $result->fetch_assoc())
    {
        $no++;
        $output .='
                <form id="exampleForm" name="example" role="form">
                <input type="hidden" name="id[]" value="'.$row["id_soal"].'">
                <input type="hidden" name="jumlah" value="'.$jumlah.'">
                <tr>
                    <td bgcolor="goldenrod">
                    <p><b>
                    '.$row["soal"].'
                    </b></p>
                    <p>
                    <input type="radio" id="" name="pilihan['.$row["id_soal"].']" value="a">
                    <label for="">'.$row["a"].'</label><br/>
                    </p>
                    <p>
                    <input type="radio" id="" name="pilihan['.$row["id_soal"].']" value="b">
                    <label for="">'.$row["b"].'</label><br/>
                    </p>
                    <p> 
                    <input type="radio" id="" name="pilihan['.$row["id_soal"].']" value="c">
                    <label for="">'.$row["c"].'</label><br/>
                    </p>
                    <p>
                    <input type="radio" id="" name="pilihan['.$row["id_soal"].']" value="d">
                    <label for="">'.$row["d"].'</label><br/>        
                    </p>
                    <input type="hidden" id="" name="jawaban['.$row["id_soal"].']" value="'.$row["x"].'">
                    
                    </td>
                </tr>
                </form>         
                    ';
    }
    
    $output .='</tbody></thead></table></div>';
    $output .='
            <script>
                    $(document).ready(function() {
                    $("#example").DataTable({
                        "bInfo":false,
                        "lengthChange": false,
                         searching: false, 
                        "targets": "no-sort",
                        "bSort": false,
                        "order": [],
                        "pageLength": 1

                        });
                } );
            </script>

            ';

    echo $output;
}

?>

回显输出 table 数据，从 mysql 到 ajax 分页到 div 模态 bootstrap [已解决]

Echo output table data with paging from mysql through ajax into div modal bootstrap [ solved ]

html

tags

pagination

modal-dialog

bootstrap-modal