如何給分頁的上一個和下一個按鈕？
[英]How to give previous and next button in pagination?
問題描述
我想在分頁中使用1到10頁號顯示，並且我想在那里使用上一個和下一個按鈕
這是我的代碼
<?php
session_start();
?>
<?php
include('conn.php');
$per_page = 15;
$select_table = "select * from clientreg";
$variable = mysql_query($select_table);
$count = mysql_num_rows($variable);
$pages = ceil($count/$per_page)
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Qjuery pagination with loading effect using PHP and MySql</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function Display_Load()
{
$("#load").fadeIn(1000,0);
$("#load").html("<img src='load.gif' />");
}
function Hide_Load()
{
$("#load").fadeOut('slow');
};
$("#paginate li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
Display_Load();
$("#content").load("pagination.php?page=1", Hide_Load());
<?php
$page
?>
$("#paginate li").click(function(){
Display_Load();
$("#paginate li")
.css({'border' : 'solid #193d81 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
var pageNum = this.id;
$("#content").load("pagination.php?page=" + pageNum, Hide_Load());
});
});
</script>
<style type="text/css">
#load {
width:30px;
padding-top:50px;
border:0px green dashed;
margin:0 auto;
}
#paginate
{
text-align:center;
border:0px green solid;
width:500px;
margin:0 auto;
}
.link{
width:800px;
margin:0 auto;
border:0px green solid;
}
li{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #193d81;
color:#0063DC;
}
li:hover
{
color:#FF0084;
cursor: pointer;
}
</style>
</head>
<body>
<div id="content" ></div>
<div class="link" align="center">
<ul id="paginate">
<?php
//Show page links
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
echo '<br/>';
?>
</ul>
</div>
<div style="clear:both"> </div>
<div id="load" align="center" ></div>
</body>
</html>
期望放
像上一個 1,2,3,4,5,6,7,8,9 10 下一個
我如何實現我的輸出
提前致謝
3 個解決方案
解決方案1
3 已采納 2014-09-02 05:47:09
將代碼替換為以下內容：
<div class="link" align="center">
<ul id="paginate">
<li id="" class="page" data-value="prev">Prev</li>
<?php
for($i=1; $i<=$pages; $i++) {
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
<li id="" class="page" data-value="next">Next</li>
</ul>
</div>
並使用以下命令更新腳本：
<script type="text/javascript">
$(document).ready(function(){
function Display_Load()
{
$("#load").fadeIn(1000,0);
$("#load").html("<img src='load.gif' />");
}
function Hide_Load()
{
$("#load").fadeOut('slow');
};
$("#paginate li:first").not('.page').css({'color' : '#FF0084'}).css({'border' : 'none'});
Display_Load();
$("#content").load("pagination.php?page=1", Hide_Load());
<?php
$page
?>
$("#paginate li").not('.page').click(function() {
Display_Load();
$("#paginate li").css({'border' : 'solid #193d81 1px'}).css({'color' : '#0063DC'}).removeClass("active");
$(this).css({'color' : '#FF0084'}).css({'border' : 'none'}).addClass("active");
var pageNum = this.id;
$("#content").load("pagination.php?page=" + pageNum, Hide_Load());
});
$("#paginate li.page").click(function() {
var page = $(this).attr("data-value");
if(page == "prev") {
var index = $("#paginate li.active").index();
if(index > 1) {
$("#paginate li.active").prev().trigger( "click" );
} else {
$("#paginate li.active").trigger( "click" );
}
} else {
var index = $("#paginate li.active").index();
if( index < $("#paginate li").length -2) {
$("#paginate li.active").next().trigger( "click" );
} else {
$("#paginate li.active").trigger( "click" );
}
}
});
});
</script>
希望對您有用。
解決方案2
2 2014-09-02 05:23:34
表面上，我覺得您仍然不應該為分頁做很多事情，例如使用sql的限制和頁數等。我建議您使用此鏈接。
http://www.sanwebe.com/2013/03/ajax-pagination-with-jquery-php
你可以在這里查看演示
http://www.9lessons.info/2010/10/pagination-with-jquery-php-ajax-and.html
在這里演示
http://www.phpgang.com/how-to-create-pagination-in-php-and-mysql-with-ajax_315.html
解決方案3
2 2014-09-02 05:28:21
只是一個想法：
在您的php中：
$current_page = isset($_POST['page']) ? $_POST['page'] : 1;
進一步：
<ul id="paginate">
<li id="prev">Previous</id>
<?php
//Show page links
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
<li id="next">Next</id>
<br />
</ul>
和點擊處理程序中的：
$("#paginate li").click(function(){
Display_Load();
$("#paginate li")
.css({'border' : 'solid #193d81 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
var pageNum = <?php echo $currentPage; ?>;
if ( this.id == "prev" )
pageNum = Math.max(1, pageNum--);
else if ( this.id == "next" )
pageNum = Math.min(<?php echo $pages ?>, pageNum++);
else
pageNum = this.id;
$("#content").load("pagination.php?page=" + pageNum, Hide_Load());
});
...未經測試，希望對您有所幫助。
分頁上一個和下一個按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.