![](/img/trans.png)
[英]Jquery pagination plugin - Next/Previous pagination links to show next/previous full group of page numbers
[英]Javascript pagination (next project / previous project) with jQuery?
最近,我来到了一个网站 ,该网站已完成了我想要的分页。 我具有与刚刚找到的站点相同的基本设置。
我想要上一个和下一个链接来浏览我的作品集。 每个项目都在一个单独的文件中(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。 关于页面内的分页有很多问题,但是关于导航到我可以找到的另一页面没有问题。
从您的问题中,您知道将要有多少页。 由此,我的意思是页面的内容本身是硬编码的,而不是从数据库中动态加载的。
如果这是您要采用的方法,则可以在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);
}
});
您可以执行此操作,而不会影响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执行分页有一定的了解。
祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.