使用jQuery添加分页(保留帖子数据)

时间:2017-10-02 21:21:58

标签: javascript php jquery html pagination

我正在寻找一种使用我的搜索表单设置分页的好方法,我希望它根据用户选择的每页条目数量显示数据。他们在搜索结果下输入的值,通过$ _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返回布尔错误时显示错误。

1 个答案:

答案 0 :(得分:0)

您可能对datatables表的jquery插件感兴趣。基本上,您必须删除片段中的分页逻辑,以便仅保留表格渲染位。然后使用javascript通过datatables启用表格上的分页和条目选择。查看他们的网站以获取指南和示例。

我的代码中经常有这种结构。 首先是一个循环,用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文件。