PHP、Smarty与jQuery Ajax 分页插件jquery.pager.js的使用

1.首先建立一个PHP文件，用于查询数据：

（具体查询数据及显示可以根据需要修改，本例中使用了一个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>

其中，pager.css参考样式为：

#pager ul.pages {
display:block;
border:none;
text-transform:uppercase;
font-size:10px;
margin:10px 0 50px;
padding:0;
}

#pager ul.pages li {
list-style:none;
float:left;
border:1px solid #ccc;
text-decoration:none;
margin:0 5px 0 0;
padding:5px;
}

#pager ul.pages li:hover {
border:1px solid #003f7e;
}

#pager ul.pages li.pgEmpty {
    border:1px solid #eee;
    color:#03F;
}

#pager ul.pages li.pgCurrent {
    border:1px solid #003f7e;
    color:#000;
    font-weight:700;
    background-color:#FF9;
}

 

 

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>