php - 使用 jQuery 的 Javascript 分页(下一个项目/上一个项目)？

Question

我最近发现了一个 site就分页而言，这完全符合我的要求。我的基本设置与我刚找到的网站相同。

我希望有上一个和下一个链接来浏览我的投资组合。每个项目都在一个单独的文件中(1.php、2.php、3.php 等)例如，如果我在 1.php 页面上并单击“下一个项目”，它将带我到 2。 PHP.

我引用的站点使用 javascript 完成此操作。我不认为这是 jQuery:

function nextPg(step) {
  var str = window.location.href;
  if(pNum = str.match(/(\d+)\.php/i)){
    pNum = pNum[1] * 1 + step+'';
    if ((pNum<1) || (pNum > 20)) { pNum = 1; }
    pNum = "".substr(0, 4-pNum.length)+pNum;
  window.location = str.replace(/\d+\.php/i, pNum+'.php'); 
}
}

然后是 HTML:

<a href="javascript:nextPg(+1)" class="nextProject">Next Project</a>

我无法真正破译上面的代码，但我假设脚本检测到您所在的页面，并将一个数字注入(inject)比当前页面高一个的下一页链接。

我想我可以复制这段代码，但它似乎不是最佳解决方案。有没有办法用 php 来做到这一点(对于那些关闭了 javascript 的人)？如果没有，是否可以将此脚本转换为与 jQuery 一起使用？

另外，如果可以用php做的话，不用脏url也能做吗？例如，http://www.example.com/index.php?next=31

我想保留链接能力。

我在 stackoverflow 上搜索过这个主题。有很多关于页面内分页的问题，但没有关于导航到我能找到的另一个页面的问题。

Answer 1

根据您的问题，您知道将会有多少页。我的意思是页面本身的内容是硬编码的，而不是从数据库动态加载的。

如果这是您要采用的方法，您可以在您的 javascript 中采用相同的方法:使用您将请求的文件名设置一个数组，然后将事件处理程序附加到您的上一个/下一个按钮以循环通过数组。您还需要跟踪“当前”页面，并检查递增/递减当前页面是否会使您超出页面数组的范围。

我下面的解决方案通过 AJAX 加载下一页，并且不会更改浏览器的实际位置。这对我来说似乎是一种更好的方法，但您的情况可能有所不同。如果是这样，您只需将相关的 AJAX 调用替换为 window.location = pages[curPage] 语句即可。

jQuery:(未经测试)

$(function() {
    var pages = [
        '1.php',
        '2.php',
        '3.php'
    ];
    var curPage = 0;

    $('.next').bind('click', function() {
        curPage++;
        if(curPage > pages.length)
            curPage = 0;
        $.ajax({
            url: pages[curPage],
            success: function(html) {
                $('#pageContentContainer').html(html);
            }
        });
    });

    $('.prev').bind('click', function() {
        curPage--;
        if(curPage < 0)
            curPage = (pages.length -1);
        $.ajax({
            url: pages[curPage],
            success: function(html) {
                $('#pageContentContainer').html(html);
            }
        });
    });

});

HTML:

<div id = "pageContentContainer">
    This is the default content to display upon page load.
</div>
<a class = "prev">Previous</a>
<a class = "next">Next</a>

要将此解决方案迁移到页面本身没有硬编码而是从外部数据库加载的解决方案，您可以简单地编写一个 PHP 脚本来输出页面的 JSON 编码数组，然后通过 AJAX 和解析 JSON 以替换上面的页面数组。

var pages = [];
$.ajax({
    url: '/ajax/pages.php',
    success: function(json) {
        pages = JSON.parse(json);
    }
});