PHP 分页 现有代码中的“下一步”按钮


PHP Pagination Next button in existing Code

我一直在使用AjaxJQuery 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>

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

根据您的评论:

首先在 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;
});
最后,

我选择了自己的解决方案,因为我发现它更容易理解,任何将来可能希望与我做同样事情的人我只是简单地添加了以下内容:

//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');
    });
});