使用pagination分頁外掛實現ajax分頁
阿新 • • 發佈：2018-11-06
1.html頁面引入jq和js外掛
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./toushu/js/jquery.pagination2.js?_t=0.1"></script>css樣式，可以自己修改
<style type="text/css"> /*分頁樣式*/ .pager .nextpage{ background-position: 45px 7px; margin: 0; } .pager .prepage_g{ background-position: 2px 8px; padding:2px 8px; } .pager{ float:left; margin-left:19%; } .pager ul li{ float:left; } .pager_a{ float:right; } .pager .total { display:block; float: left; padding: 2px 8px; text-align: center; color: #000; background: #fff; border: 1px solid #ccc; } .pager .nextpage,.pager .nextpageg_g,.pager .prepage_g,.pager .prepage{ padding: 2px 8px;; } .pager .nextpage a,.prepage a{ font-size:14px; } .pager .prepage,{background-position: 2px 7px;} .pager .no1,.pager .no2{padding:2px 8px;} .pager .no1 a,.pager .no2 a{ font-size:14px; } /*分頁樣式end*/ </style>
2.顯示div和js, jump函式可以通過ajax傳遞當前頁面給後臺，實現ajax分頁。
<div class='page_line page_line1' style="text-align: center; margin-top: 20px;" ></div> <script type="text/javascript"> $('.page_line1').pagination({ totalData: <?=$count?>, showData : <?=$pagesize?>, jump:true, coping:true, count:3, current: <?=$_GET['page'] ?>, homePage:'首頁', endPage:'末頁', prevContent:'上一頁', nextContent:'下一頁', callback:function(api){ jump(api.getCurrent()); } }); function jump(page){ //點選頁碼時的跳轉 window.location.href= '<?=$url?page=?>'+page; } </script>
後臺程式碼：
// 分頁 include "./toushu/page.php"; $page = isset($_GET['page']) ? (int)$_GET['page'] : 1; if($pager->intBeginDate < 0) $pager->intBeginDate = 0; $pagesize = 20; $count = $_weixin_yanfang_user_prize->_listcount($sql_add); //傳入兩個引數即可 $pager = new Pager($count,$pagesize); $page_info = $pager->getPageInfo(); $list = $_weixin_yanfang_user_prize->_list($pager->intBeginDate, $pagesize, "*" ,$sql_add);
page類，可直接用
<?php
/*
*
* 特點：
*
* 一般情況下只要給這個類2個引數就能正常執行，使用很方便。
* URL中有其他變數時，也會自動加入相應的變數。
*
* 方法:
*
* Pager Pager(int intTotalDate, int intNumOfPage, [int intNumOfBar],[stringstrPageVar]);
* string show($a = '頁次:', $b = '/', $c = ' 每頁:', $d = ' 共計:')
* string parse()
*
* 屬性:
*
* intTotalDate 總記錄數
* intNumOfPage 每頁顯示記錄數
* strPageVar 翻頁變數名，預設為“PAGEID”
* intPageTotal 總頁數
* intBeginDate 本頁開始的記錄序號
* intPage 當前頁數
* intNumOfDate 當前頁面顯示的記錄數
* intUpPage 上一頁的頁數
* intPageBegin 翻頁條最開始的頁數
*
* 用法
$pager = new Pager(912,25,5,"b");
echo $page_info = $pager->getPageInfo();
*
*/
class Pager
{
protected $first_page = '首頁 ';
protected $pre_page = '上一頁';
protected $next_page = '下一頁';
protected $last_page = ' 尾頁';
protected $sign = '/';
private $tag = '';
/*
* 建構函式
*/
public function __construct($intTotalDate, $intNumOfPage, $intNumOfBar = 9, $strPageVar = 'page') {
$this->intTotalDate = $intTotalDate;
$this->intNumOfPage = $intNumOfPage;
$this->strPageVar = $strPageVar;
$this->intPageTotal = ceil($intTotalDate/$intNumOfPage);
//當前頁數沒有則為1
if (!isset($_GET[$this->strPageVar]) or $_GET[$this->strPageVar] < 1) {
$_GET[$this->strPageVar] = 1;
}
//當前頁數不允許超出最大頁數
if ($_GET[$this->strPageVar] > $this->intPageTotal) {
$_GET[$this->strPageVar] = $this->intPageTotal;
}
//當前頁數
$this->intPage = $_GET[$this->strPageVar];
if($this->intPage < 1) $this->intPage = 1;
//本頁開始的記錄序號
$this->intBeginDate = ($this->intPage - 1) * $this->intNumOfPage;
//本頁顯示記錄數
if ($this->intPage == $this->intPageTotal) {
$this->intNumOfDate = $this->intPageTotal - ($this->intPage - 1) * $this->intNumOfPage;
}else {
$this->intNumOfDate = $this->intNumOfPage;
}
//上一頁
if ($this->intPage <= 1){
$this->intUpPage = NULL;
}else {
$this->intUpPage = $this->intPage - 1;
}
//下一頁
if ($this->intPage >= $this->intPageTotal){
$this->intPageDown = NULL;
}else {
$this->intPageDown = $this->intPage + 1;
}
//翻頁條最開始的頁數
if ($this->intPage <= ceil($intNumOfBar/2)){
$this->intPageBegin = 1;
}else {
$this->intPageBegin = $this->intPage - ceil($intNumOfBar/2 - 1);
}
//翻頁條最後的頁數
$this->intPageEnd = $this->intPageBegin + $intNumOfBar - 1;
if ($this->intPageEnd >= $this->intPageTotal){
$this->intPageEnd = $this->intPageTotal;
$this->intPageBegin = $this->intPageTotal - $intNumOfBar + 1;
if($this->intPageBegin <= 0){
$this->intPageBegin = 1;
}
}
//位址列
$this->get = $this->_get();
}
/*
* 解析輔助資訊
*/
public function show() {
//$out = $this->page_text.$this->intPage;
$out = $this->intPage.$this->sign.$this->intPageTotal;
//$out .= $this->sign.$this->intPageTotal;
//$out .= $this->per_text.$this->intNumOfPage;
//$out .= $this->total_text.$this->intTotalDate."\r\n";
return $out;
}
/*
* 解析翻頁條
*/
public function parse(){
$out = '';
$out.= $this->_href(1,'<span>'.$this->first_page.'</span>')."\r\n";
$out.= $this->_href($this->intUpPage,'<span>'.$this->pre_page.'</span>')."\r\n";
for ($i=$this->intPageBegin;$i<=$this->intPageEnd;$i++) {
$out.='[ '.$this->_href($i,$i).' ]'."\r\n";
}
$out.= $this->_href($this->intPageDown,'<span>'.$this->next_page.'</span></a>')."\r\n";
$out.= $this->_href($this->intPageTotal,'<span>'.$this->last_page.'</span>')."\r\n";
return $out;
}
/*
* 規範位址列
*/
public function _get() {
$out = '?';
foreach ($_GET as $key => $value){
if ($key == $this->strPageVar) {
continue;
}
if($value){
$out .= $key.'='.htmlspecialchars($value).'&';
}
}
foreach ($_POST as $key => $value){
if ($key == $this->strPageVar) {
continue;
}
if($value && !is_array($value)){
$out .= $key.'='.htmlspecialchars($value).'&';
}
}
$out.=$this->strPageVar.'=';
return $out;
}
/*
* 連結樣式
*/
public function _href($num, $content){
if ($num == '') {
return $content;
}elseif ($num == $this->intPage AND $content == $this->intPage) {
return '<font color="red"><strong>'.$content.'</strong></font>';
}elseif ($num == $this->intPageTotal AND $this->intPageTotal == $this->intPage) {
return $content;
}elseif ($num == 1 AND 1 == $this->intPage) {
return $content;
}else {
if(!empty($this->tag))
return '<a href="'.$_SERVER["SCRIPT_NAME"].$this->get.$num.'#'.$this->tag.'">'.$content.'</a>';
else
return '<a href="'.$_SERVER["SCRIPT_NAME"].$this->get.$num.'#huxing">'.$content.'</a>';
}
}
/*
*設定錨點
*/
public function set_tag($t){
$this->tag = $t;
}
/*
* 下拉選單
*/
public function goto() {
$out = '<select name="select" onchange="javascript:window.location.href=this.options[this.selectedIndex].value">'."\r\n";
for ($i = 1;$i <= $this->intPageTotal;$i++){
$out .= $this->_option($i);
}
$out .= '</select>'."\r\n";
return $out;
}
public function _option($num) {
if ($this->intPage == $num) {
$selected = ' selected';
}else {
$selected = '';
}
return '<option value="'.$_SERVER["SCRIPT_NAME"].$this->get.$num.'"'.$selected.'>
'.$num.'</option>'."\r\n";
}
/*
* 獲得選單資訊
*/
public function getPageInfo() {
$page['parse'] = $this->parse();
$page['show'] = $this->show();
$page['goto'] = $this->goto();
return $page;
}
}//End Class
?>