Echo output table data with paging from mysql through ajax into div modal bootstrap [ solved ]
now im creating a small quiz web app connecting to mysql db, everything goes well.. till have a problem to deal with create table inside modal pop up.. when i put the whole table inside div class="modal-body", its show on main page ( behind the modal ) not inside the modal.
since the problem that i faced above, im using diffrent approach to create a table, after doing reasearc on entire web forum, there is another way to create table without table tag, its said we can use div to create the table. it does and work well. the table show up inside modal with some data from database.
now it seem ive seen heaven door a head , but the pagination have block me up, i tried some code but its still no luck, since i go with div table i cant use instant table like datatable because its lack of node ( Non-table node initiation ) neither with traditional way url path.
all ineed is show one question per page with naviigate links ( prev | next )
Any assistance you can provide would be greatly appreciated
Below is the screenshoot the apps after user log in then it allow the user to choose which quiz they ready for
and this one how its look after user choosed the quiz provide
as we can see at the picture above , how can i colaborate with paging that can deal with div table ?
below is some code from 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">×</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>
after tried some other way,i found the solution for viewing data table inside modal problem,
so back to first plan, im keep using table tag to create the table, but not inside the modal body.
i create another file for ajax function to pass data from database and presenting the result within table and send it to div with id selector, for future reference , let me to share this piece of ajax code
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"> ×</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>
and for the paging , im using bootstrap datatable
<?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;
}
?>
