表格分页无需重新加载页面 -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>