为页面上的特定表创建分页

时间:2016-01-15 10:19:17

标签: php ajax mysqli pagination

您好我已经在正常工作的页面上创建了一个基本分页但我的代码中的问题是分页在整个页面上生效并重新加载页面并且还影响同一页面上的其他表。

我希望分页只影响特定的表,这样我就可以在单个页面上放置多个表及其各自的分页,

我做了一些研究,发现我可以使用ajax,但它完全改变了我现在的代码,有没有办法在不改变我当前表位的情况下解决问题

<?php
$perpage=10;
if(isset($_GET['page'])){
    $page=$_GET['page'];
}
else{
    $page=1;
}
$offset=($page-1)*$perpage;


?><div class="table">   <?   
$sql="SELECT * from `request` LIMIT $offset,$perpage";
$result = mysqli_query($con, $sql);
if(mysqli_num_rows($result)>0)
    {?>
        <table border="1">
            <tr>
                <td>Question</td>
                <td>Answer</td>
            </tr>
            <?php 
            while($row= mysqli_fetch_assoc($result))
                {?>
                    <tr>
                        <td><?php echo $row['id'];?></td>
                        <td><?php echo $row['title'];?></td>
                    </tr>
            <?  }?>
        </table>
<?}
?></div>    <?

$sql="select * from `request`";
$result=mysqli_query($con,$sql);
$total_rows=mysqli_num_rows($result);
$total_pages=ceil($total_rows/$perpage);
?>
<div class="col-sm-4 text-right">
    <ul class="pagination pagination-sm m-0">
        <?
        echo "<li><a href='test.php?page=1'>First</a></li>";

                for($i=1;$i<=$total_pages;$i++)
                    {
                        echo "<li><a href='test.php?page=$i'>$i</a></li>";
                    }

        echo "<li><a href='test.php?page=$total_pages'>last</a></li>";
    ?>
    </ul>
</div>

1 个答案:

答案 0 :(得分:0)

如果您不想刷新页面,则必须使用ajax或 最好的选择是使用数据表。

https://datatables.net/examples/ajax/simple.html

只需要创建表并分配一个类或id,并使用该id或类调用datatable函数。见下面的例子

<table id="dataTable">
<tr>
    <td>Question</td>
    <td>Answer</td>
</tr>
<?php 
while($row= mysqli_fetch_assoc($result))
    {?>
        <tr>
            <td><?php echo $row['id'];?></td>
            <td><?php echo $row['title'];?></td>
        </tr>
<?  } ?>
</table>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.scrollingPagination.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#dataTable').dataTable( {
        "pagingType": "scrolling"
    } );
} );
</script>