PHP、Smarty与jQuery Ajax 分页插件jquery.pager.js的使用
(具体查询数据及显示可以根据需要修改,本例中使用了一个Dept表,有两个字段:DeptCode和DeptName,处理结果集的方式也可以根据自己使用的数据访问方式来修改。)
注:此文重点在介绍该插件的用法,望大家取其精华去其糟粕!
<?php
include_once("./class.config.php");
include_once("./class.login.php");
include_once("include/BaseFunction.php");
$PerPageCount=2;
//如果传递了pager参数
if(isset($_POST['pager']) && isset($_POST['count']))
{
echo GetDeptpager($_POST['count'],$_POST['pager']);
}
else
{
$rs= $db->SelectSQL("select count(*) as cc from dept");
if($r=$db->Fetch($rs))
{
$reccount=$r['cc'];
}
$totalpagecount=ceil($reccount/$PerPageCount);
//显示第一页数据
$FirstContent=GetDeptPager($PerPageCount,1);
$Smarty->assign("totalpagecount",$totalpagecount);
$Smarty->assign("PerPageCount",$PerPageCount);
$Smarty->assign("FirstContent",$FirstContent);
$Smarty->display("DeptPager.html");
}
function GetDeptPager($count,$pager)
{
global $db;
global $PerPageCount;
$rs= $db->SelectSQL("select * from dept limit ".($pager-1)*$PerPageCount.",".$PerPageCount);
while ($r=$db->Fetch($rs))
{
$temp[]=$r;
}
if(!isset($temp))
{
return "不会吧?没有查询到任何结果!";
}
$s="<table border=1>";
$s.="<tr><th>部门编码</th><th>部门名称</th></tr>";
foreach($temp as $k=>$v)
{
$s.='<tr><td>'.$v['DeptCode'].'</td><td>'.$v['DeptName'].'</td></tr>';
}
$s.="</table>";
$s='每页记录数:'.$count.'当前页码:'.$pager.$s;
return $s;
}
?>
2.引入js:
<link href="../CSS/Pager.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../Library/jquery1.3.1/dist/jquery.js"></script>
<script type="text/javascript" src="../Library/jquery1.3.1/jquery.pager.js"></script>
3.在页面中定义脚本
<script type="text/javascript" language="javascript">
var TotalPageCount=2;
var PerPageCount=10;
$(document).ready(function(){
TotalPageCount=document.getElementById('totalpagecount').value;
$("#pager").pager({ pagenumber: PerPageCount, pagecount: TotalPageCount, buttonClickCallback: PageClick });
});
function CreateQueryString(pageclickednumber)
{
var querystr="pager="+pageclickednumber+"&count="+PerPageCount;
return querystr;
}
function TestClick(pageclickednumber)
{
$.ajax({
type:"POST",
url:"../DeptPager.php",
data:CreateQueryString(pageclickednumber),
success:function(data){
$("#input").html(data);
}
});
}
PageClick = function(pageclickednumber)
{
TestClick(pageclickednumber);
$("#pager").pager({ pagenumber: pageclickednumber,
pagecount: TotalPageCount, buttonClickCallback: PageClick });
}
</script>
4.页面中需要保留的区域:
<div id="input"><{$FirstContent}></div>
<input type="hidden" id="totalpagecount" value="<{$totalpagecount}>" />
<input type="hidden" id="perpagecount" value="<{$perpagecount}>" />
<div id="pager" ></div>