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>

转载于:https://www.cnblogs.com/GarfieldTom/archive/2009/06/14/1503064.html

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

  1. java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程

    摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...

  2. 12款优秀jQuery Ajax分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...

  3. 分页插件 ajax请求,jquery ajax分页插件的简单实现

    说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 ...

  4. mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页...

    jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页 简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...

  5. jquery php 分页插件,jQuery 分页插件代码

    jQuery 分页插件代码 js代码 var newlist = new Vue({ el: '#app', data: { current_page: 1, //当前页 pages: 50, //总 ...

  6. java ajax jquery分页插件_jQuery ajax分页插件实例代码

    既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述.介绍也 比不上代码来得实在.) 1.首先定义一个pager对象: var sjPag ...

  7. java ajax jquery分页插件_jquery ajax分页插件的简单实现

    说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 ...

  8. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,发现自己的园龄竟然有4年之久了,没记错的话刚接触编程就知道了博客园,也就是说我入坑4年了?时光啊~.刚学习编程的时候最喜欢的就是来园子里听大神们吹牛逼,看着他们装逼就觉得很 ...

  9. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

最新文章

  1. 发条js调试工具_小工具大帮手,利用 @open-node/antman 实现 node.js 进程线上调试,无须重启...
  2. Android studio自定义变量
  3. 中国氢能行业发展现状与投资规划深度研究报告2022-2027年版
  4. php网页轮播图,JavaScript_JavaScript实现图片轮播的方法,本文实例讲述了JavaScript实现图 - phpStudy...
  5. php连接mysql数据并查询
  6. linux内核中测量时间的方法,Linux内核中获取时间函数do_gettimeofday
  7. html中img引入git动画,用Github五万颗星的css动画库, 为网页增添趣味性
  8. puppeteer 自动化测试 一
  9. 扫地机器人石头爬坡_都这么强了,还要怎么升级:真实评测石头T6扫地机器人...
  10. H.264笔记之三——环路内滤波
  11. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_15-webpack研究-webpack-dev-server-程序调试...
  12. linux 定时器中断脉冲计数,STM32定时器产生指定个数脉冲
  13. 工行软开和中行软开_工行软开怎么样啊待遇如何,知道的说下啊
  14. Android 取消壁纸,android – 壁纸设置强制关闭
  15. 怎么在服务器解压文件,云服务器怎么解压文件
  16. 数字孪生医院:一个围绕着智慧医院决策的建模、管理和行动闭环的全新方式...
  17. 万般皆下品,唯有收租高
  18. java默认字体_设置 Java 系统的默认字体
  19. FLAG_DISMISS_KEYGUARD FLAG_SHOW_WHEN_LOCKED
  20. WPS文字转Word用什么软件

热门文章

  1. VMware NSX 6.2初学者指南 - 从实验室的零部署到完全部署
  2. Java多线程学习总结(3)——Java线程的6种状态及切换
  3. Java基础学习总结(170)——Java8并发工具类CompletableFuture学习总结
  4. Java Web学习总结(42)——JavaEE常用的13种核心API与组件
  5. Docker学习总结(31)——使用Maven插件构建docker镜像
  6. Mysql学习总结(30)——MySQL 索引详解大全
  7. oracle报错00838,ORA-00838: Specified value of MEMORY_TARGET is too small
  8. Java编写学生类student程序_编写一个JAVA程序片断定义一个表示学生的类student.docx...
  9. java中goto用法源代码,java中goto语句解析12
  10. quartz获取缓存中所有运行中的Job