Javascript分页（下一个项目/以前的项目）与jQuery？

Question

我最近遇到了一个site，完成了我想要的任何分页。我和我刚刚找到的网站具有相同的基本设置。

我想有prev和下一个链接浏览我的投资组合。每个项目将在一个单独的文件（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搜索。关于页面内的分页有很多问题，但没有关于导航到我可以找到的另一个页面的问题。

Answer 1

从你的问题你知道会有多少页面。从这意味着页面本身的内容是硬编码的，而不是从数据库动态加载。

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

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

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

Answer 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功能，我们为我们的数据去，最好是DIV已经在DOM中存在的目标的。

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

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

祝你好运！