表分頁而不重新加載頁面-Bootstrap-

Question

我有一個表從數據庫中獲取其數據

我想對表進行分頁，但不刷新頁面

我的表格代碼：

    <?php 
         <table id="table2" class="table table-hover table-mc-light-blue ">
         <thead>
         <tr>
             <th>#</th>
             <th>اسم المطرب</th>
             <th>عدد الاغاني</th>
             <th>تعديل</th>
             </tr>
             </thead>
             <tbody class="searchable" >
          <?php
             $artistquery= mysqli_query($conn,"SELECT * FROM `artist`  ORDER BY `artistID` DESC ");
         $num=1;
         $x=0;
         while($listartist = mysqli_fetch_assoc($artistquery)){                                                 
        $songquery= mysqli_query($conn,"SELECT * FROM `songs` WHERE `artist` = '$listartist[artistname]' ");
            $songsnumber = mysqli_num_rows($songquery);
        $x+=0.1;
        echo'
    <tr class="animated bounceIn " style=" animation-delay:'.$x.'s;">
 <td data-title="#"></td>
 <td data-title="اسم المطرب"></td>
 <td data-title="عدد الاغاني"></td>
 <td data-title=""></td>
                                                    </tr> ';}

                                                    ?>

注意：我嘗試了DataTables.js，但是我確實知道如何刪除過濾器並顯示標簽。 有什么不同的方法嗎？

Answer 1

我無法完全理解您的查詢，因此我將堅持進行分頁。 假設您要一次顯示10個項目，並且使用next和prev作為分頁按鈕，則可以在查詢中使用LIMIT 10或使用array_slice($mysql_result,0,10)渲染第一個視圖。 我下載了包含zip（國家和代碼）的json文件，這就是我用來測試的文件。 下一個和上一個完全完美，但它可以正常工作。

 <?php $mysql_result = (array) json_decode(file_get_contents('zips')); if(isset($_GET['ajax'])){ header('content-type: application/json'); $_GET['offset'] = isset($_GET['offset'])?$_GET['offset']:0; echo json_encode(array_slice($mysql_result,$_GET['offset'],10)); exit; } $ar = array_slice($mysql_result,0,10);//or add LIMIT 10 in sql query ?> <table border="on" width="100%"> <tbody id="songartiststuff"> <?php foreach($ar as $k => $r)://initial render?> <tr> <td data-replace="code"><?=$r->code?></td> <td data-replace="country"><?=$r->country?></td> </tr> <?php endforeach;?> </tbody> </table> <center> <button data-next="10">Next</button> <button data-prev="0">Prev</button> </center> <script src="jquery.js"></script> <?php $mysql_result = (array) json_decode(file_get_contents('zips')); if(isset($_GET['ajax'])){ header('content-type: application/json'); $_GET['offset'] = isset($_GET['offset'])?$_GET['offset']:0; echo json_encode(array_slice($mysql_result,$_GET['offset'],10)); exit; } $ar = array_slice($mysql_result,0,10);//or add LIMIT 10 in sql query ?> <table border="on" width="100%"> <tbody id="songartiststuff"> <?php foreach($ar as $k => $r)://initial render?> <tr> <td data-replace="code"><?=$r->code?></td> <td data-replace="country"><?=$r->country?></td> </tr> <?php endforeach;?> </tbody> </table> <center> <button data-next="10">Next</button> <button data-prev="0">Prev</button> </center> <script src="jquery.js"></script> <script> $(()=>{ document.querySelector('[data-next]').addEventListener('click',function(){ move(this.dataset.next); console.log(this.dataset.next); this.setAttribute('data-next',parseInt(this.dataset.next) + 10);//add to next var prv = document.querySelector('[data-prev]'); prv.setAttribute('data-prev',parseInt(prv.dataset.prev) + 10);//add to prev }) document.querySelector('[data-prev]').addEventListener('click',function(){ move(this.dataset.prev); console.log(this.dataset.prev); this.setAttribute('data-prev',parseInt(this.dataset.prev) - 10);// remove form next var nxt = document.querySelector('[data-next]'); nxt.setAttribute('data-next',parseInt(nxt.dataset.next) - 10);//remove from prev }) function move(int){ var template = document.querySelector('tbody tr').cloneNode(true);//get a sample from tbody $.get('table.php?ajax=true&offset='+int).success(function(data){ $(document.querySelector('tbody')).empty(); $.each(data,function(i,v){ let tp = tmp.cloneNode(true);//clone the template tp.querySelector("[data-replace='code']").innerHTML = v.code;//replace code tp.querySelector("[data-replace='country']").innerHTML = v.country;//replace country document.querySelector('tbody').appendChild(tp);//append to tbody }) }); } }); </script>