现有代码中的 PHP 分页下一步按钮答案

【问题标题】：PHP Pagination Next button in existing Code现有代码中的 PHP 分页下一步按钮
【发布时间】：2014-11-17 16:58:50
【问题描述】：

我一直在使用Ajax 和JQuery 关注关于PHP 分页的非常深入的教程，并且我正在尝试修改它，以便我可以在分页选项卡中显示下一个按钮。

这是我用来生成分页栏的代码：

$results = mysqli_query($connecDB,"SELECT COUNT(*) FROM paginate");
$get_total_rows = mysqli_fetch_array($results); //total records
$pages = ceil($get_total_rows[0]/$item_per_page);   

//create pagination
if($pages > 1)
{
    $pagination = '';
    $pagination .= '<ul class="paginate">';
    for($i = 1; $i<=$pages; $i++)
    {
        $pagination .= '<li><a href="#" class="paginate_click" id="'.$i.'-page">'.$i.'</a></li>';
    }

    $pagination .= '<li><a href="#" class="paginate_click" name="nxt" >>></a></li>';//Next
    $pagination .= '</ul>';
}

然后我等到文档准备好并运行这个script：

$(document).ready(function() {
    $("#results").load("fetch_pages.php", {'page':0}, function() {
        $("#1-page").addClass('active');
    }); 

    $(".paginate_click").click(function (e) {
        $("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
        var clicked_id = $(this).attr("id").split("-"); 
        var page_num = parseInt(clicked_id[0]); 
        $('.paginate_click').removeClass('active'); 
        $("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){    
        });
        $(this).addClass('active'); 
        return false; 
    }); 
});

这是html：

<body>
<div id="results"></div>
<?php echo $pagination; ?>
</body>

然后它会输出结果列表和它们下方的分页栏，并且运行良好。我遇到的问题是如何包含“下一步”按钮？我目前正在处理这个问题，所以我尝试的任何新代码都会发布到这个问题中。将不胜感激任何帮助。

【问题讨论】：

看起来你有下一个按钮..你的意思是你如何处理那个按钮的点击事件？
对不起，我忘了我把它放在那里了，我想是的，我正在尝试一些不同的东西。我想如果我在页面加载时在分页列表末尾生成按钮，然后根据用户所在的当前页面以某种方式将 id 更新为下一页，我想我不确定我能做到多少这样做。

标签： javascript php jquery ajax pagination

【解决方案1】：

根据您的评论：

当你在 php 中创建 <a> 时，首先给它一些数据。我假设您知道他们在脚本的这一部分中位于哪个页面上

<a href="#" data-currentPageId=".$currentPageId." class="next"></a>

//or just create the next page link based on the id
$nexPage = 'http://nextpagebasedoncurrentpage.php';
<a href="#" data-nextPage=".$nextPage." class="next"></a>

Javascript：

$('.next').click(function(){
    current_page_id = $(this).data('currentPageId');
    window.location = http://....however you get to the next page based on the id

    //or go to the next page if you chose that option
    next_page_location = $(this).data('nextPage');
    window.location = next_page_location;
});

【讨论】：

【解决方案2】：

最后我选择了自己的解决方案，因为我发现它更容易理解，将来可能希望和我做同样事情的人我只是添加了这个：

//Next Button
$(".next").click(function(e){
    $("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
    var page = $(".active").attr("id").split("-");
    var nxtPage = parseInt(page[0]);
    var nxtPageid = "#"+(nxtPage+1)+"-page";
    console.log(nxtPageid);
    $(".active").removeClass('active');
    $("#results").load("fetch_pages.php", {'page':nxtPage}, function(){ 
        $(nxtPageid).addClass('active');
    });
});

【讨论】：