使用 jQuery 添加分页（保留帖子数据）

Question

我正在寻找一种使用我的搜索表单设置分页的好方法，我希望它根据用户选择的每页条目数量来显示数据。他们在搜索结果下输入的这个值是通过 $_POST['searchamount'] 获取的。然后我尝试按照一些教程设置一个简单的分页，但我一直遇到问题，因为以下页面无法显示任何数据，我相信这是因为我的搜索脚本需要 $_POST['search'] 值是真实的意思 somebudy 提交表单，当点击数字滚动结果页面时，它只会重定向到 search.php?page=1 例如。如何添加其他方式以便它可以继续搜索，同时确保其安全？

我在网上阅读了一些很酷的方法来使用 jQuery，我希望它可以自动显示以下结果而无需离开页面。

这是我尝试过的示例

<?php while($row = mysqli_fetch_array($result)): ?>
    <tr>
        <td><?php echo $row['FactionName'];?></td>
        <td><?php echo $row['MoneyBalanceFormatted'];?></td>
        <td><?php echo $row['SpawnerWorthFormatted'];?></td>
        <td><?php echo $row['BlockWorthFormatted'];?></td>
        <td><?php echo $row['ItemWorthFormatted'];?></td>
        <td><?php echo $row['TotalWorthFormatted'];?></td>
        <td><?php echo $row['RichestMember'];?></td>
    </tr>
<?php endwhile;?>
<?php
    $page_query = "SELECT * FROM  ORDER BY TotalWorth DESC";
    $page_result = mysqli_query($con, $page_query);
    $total_records = mysqli_num_rows($page_result);
    $total_pages = ceil($total_records/$record_per_page);
    $start_loop = $page;
    $difference = $total_pages - $page;
    if($difference <= 5)
    {
     $start_loop = $total_pages - 5;
    }
    $end_loop = $start_loop + 4;
    if($page > 1)
    {
     echo "<a href='search.php?page=1'>First</a>";
     echo "<a href='search.php?page=".($page - 1)."'><<</a>";
    }
    for($i=$start_loop; $i<=$end_loop; $i++)
    {     
     echo "<a href='search.php?page=".$i."'>".$i."</a>";
    }
    if($page <= $end_loop)
    {
     echo "<a href='search.php?page=".($page + 1)."'>>></a>";
     echo "<a href='search.php?page=".$total_pages."'>Last</a>";
    }


    ?>

虽然我的示例根本无法正常工作，但它甚至会显示错误，mysqli_num_rows 返回布尔错误。

Answer 1

您可能对datatables 一个用于表格的 jquery 插件感兴趣。基本上，您必须删除 sn-p 中的分页逻辑，以便只保留表格渲染位。然后，感谢datatables，使用 javascript 在表格上启用分页和每页选择条目。查看他们的网站以获取指南和示例。

我的代码中经常有这种结构。 首先是一个循环，用 SQL 查询中的数据填充表头、页脚和正文。

    <?php if( isset($report['rows']) && count($report['rows']) > 0 ): ?>
        <div id="report-table-container">
            <table id="report-table" class="uk-table uk-table-hover uk-table-striped" cellspacing="0" width="100%">
                <thead>
                    <tr>
                    <?php foreach( $report['cols'] as $k => $v ): ?>
                        <th> <?= $v ?> </th> 
                    <?php endforeach ?>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                    <?php foreach( $report['cols'] as $k => $v ): ?>
                        <th> <?= $v ?> </th> 
                    <?php endforeach ?>
                    </tr>
                </tfoot> 
                <tbody>
                    <?php foreach($report['rows'] as $index => $entry): ?>
                    <tr>
                        <?php foreach( $report['cols'] as $k => $v ): ?>
                        <td> <?= $entry[$k] ?> </td> 
                        <?php endforeach ?>
                    </tr> 
                    <?php endforeach ?>
                </tbody>        
            </table>
        </div>  
        <?php endif ?>

请注意，该表具有属性id='report-table'。在您的 javascript 中使用它来启用该表的分页。像这样

<script>
$(document).ready(function() {
    $('#report-table').DataTable({
        dom: 'tipl'
    })
</script>

参数 dom 指定要添加到表中的元素。 l 例如指定一个下拉菜单，用于选择每页的项目数。 确保您已导入 jQuery 和 DataTable js 和 css 文件。