2

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

我希望有上一个和下一个链接来浏览我的投资组合。每个项目都在一个单独的文件中（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>

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

我想我可以复制这段代码，但它似乎不是最好的解决方案。有没有办法用 php 做到这一点（对于关闭 javascript 的人）？如果没有，这个脚本可以转换为与 jQuery 一起使用吗？

另外，如果可以用 php 完成，是否可以在没有脏 URL 的情况下完成？例如，http://www.example.com/index.php?next=31

我想保留链接能力。

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

4

2 回答 2

2

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

如果这是您要采用的方法，您可以在您的 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替换上面的 pages 数组。

var pages = [];
$.ajax({
    url: '/ajax/pages.php',
    success: function(json) {
        pages = JSON.parse(json);
    }
});
于 2012-02-28T20:37:37.557 回答
2

您可以在不影响 URL 结构的情况下执行此操作。

创建一个函数来控制页面流，使用 ajax 调用

function changePage(page){
  $.ajax({ 
    type: 'POST',
    url: 'myPaginationFile.php',
    data: 'page='+page,
    success: function(data){
      //work with the returned data.
    }
  });  
}

这个函数必须被创建为一个全局函数。

现在我们在页面加载时调用该函数，因此我们最初总是停留在第一页。

changePage('1');

然后我们需要创建一个分页文件来处理我们的请求，并输出我们需要的内容。

<?php
  //include whatever you need here. We'll use MySQL for this example



  $page = $_REQUEST['page'];
  if($page){ 
    $q = $("SELECT * FROM my_table");

    $cur_page = $page; // what page are we on

    $per_page = 15; //how many results do we want to show per page?

    $results = mysql_query($q) or die("MySQL Error:" .mysql_error()); //query 

    $num_rows = mysql_num_rows($result); // how many rows are returned

    $prev_page = $page-1 // previous page is this page, minus 1 page.
    $next_page = $page+1 //next page is this page, plus 1 page.

    $page_start = (($per_page * $page)-$per_page); //where does our page index start
    if($num_rows<=$per_page){
      $num_pages = 1;
      //we checked to see if the rows we received were less than 15. 
      //if true, then we only have 1 page.
    }else if(($num_rows % $per_page)==0){
      $num_pages = ($num_rows/$per_page);
    }else{
      $num_pages = ($num_rows/$per_page)+1;
      $num_pages = (int)$num_pages;
    } 

    $q. = "order by myColumn ASC LIMIT $page_start, $per_page";
    //add our pagination, order by our column, sort it by ascending 

    $result = mysql_query($q) or die ("MySQL Error: ".mysql_error());
    while($row = mysql_fetch_array($result){
      echo $row[0].','.$row[1].','.$row[2];
      if($prev_page){
        echo '<a href="#" id="prev-'.$prev_page.'"> Previous </a>';
        for(i=1;$i<=$num_pages;$i++){
          if($1 != $page){
            echo "<a href=\"JavaScript:changePage('".$i."');\";> ".$i."</a>";
          }else{
            echo '<a class="current_page"><b>'.$i.'</a>';
          }
        }
        if($page != $num_pages){
          echo "<a class='next_link' href='#' id='next-".$next_page."'> Next </a>';
        }
      }
    }          
  }

我选择明确定义下一个和上一个函数；所以我们在这里使用 jQuery！

$(".prev_link").live('click', function(e){
  e.preventDefault();//not modifying URL's here.
  var page = $(this).attr("id");
  var page = page.replace(/prev-/g, '');
  changePage(page);              
});

$(".next_link").live('click', function(e){
 e.preventDefault(); // not modifying URL's here
 var page = $(this).attr("id");
 var page = page.replace(/next-/g, '');
 changePage(page);
});

最后，我们回到我们最初构建的 changePage 函数，并为我们的数据设置一个目标，最好是一个已经存在于 DOM 中的 DIV。

...
success: function(data){
  $("#paginationDiv").html(data);
}

我希望这至少能让您了解如何在不修改 URL 栏的情况下使用 ajax 和 php 执行分页。

祝你好运！

于 2012-02-28T20:52:59.163 回答