Question

我一直在使用PHP和Ajax关注JQuery分页的深入教程，我试图以这样的方式修改它可以在分页标签中显示下一个按钮。

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

$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>

然后输出结果列表和它们下面的分页栏，它运行正常。我遇到的问题是我如何能够包含一个＆＃34; Next＆＃34;按钮？我目前正在处理此问题，因此我尝试使用的任何新代码都会发布到此问题中。非常感谢任何帮助。

Answer 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;
});

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

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

2 个答案: