jpaginate
总结了一下前人的东西,并用了两种方法进行分配的学习,这样更有效的进行记忆.
demo网站为http://tympanus.net/jPaginate/
看demo时,IE6,7,9可能会出现排版混乱的情况.这个情况是因为其判断浏览器版本的方式不对,具体代码为:
?
var bVer = navigator.appVersion; if(bVer.indexOf('MSIE 7.0') > 0) var ver = "ie7"; ? ?
将其换成
?
var isIE = $.browser.msie; var bv = $.browser.version; if(isIE && bv == '7.0') var ver = "ie7"; ?
?.
用法:
属性设置
设置方法如：
$(elementID).paginate({
count:80,
start:1,
...
})
count: 数字，总记录数。
start: 数字，开始显示的页数，如：3表示从第3页开始。
display: 数字，分页条显示的页数，如：5表示一次显示5个页码数。
border: 是否显示页码的边框。(true/false)
border_color: 设置边框的颜色，如"#d3d3d3"。
text_color: 设置页码的颜色，如"#68ba64"。
background_color: 设置页码的背景色，如"#f7f7f7"。
border_hover_color: 设置鼠标滑向页码时页码边框的颜色。
text_hover_color: 设置鼠标滑向页码时页码的颜色。
background_hover_color: 设置鼠标滑向页码时页码背景的颜色。
images: 是否显示页码导航箭头（方向箭头）(true/false)
mouse: 设置为'press'时，当鼠标滑向导航箭头时，页码随之滚动；设置为'slide'时，鼠标单击一次导航箭头页码滚动一次。
onChange: 当单击页码时，回调函数.
实例应用：PHP+jQuery实现Ajax分页效果
首先准备index.php，该页面用来分页展示一个博客文章列表。
1、引用JS:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.jpaginate.js"></script> <script type="text/javascript"> $(function(){ list(0); $("#demo").paginate({ count: 3, start: 1, display: 2, border: true, border_color: '#fff', text_color: '#fff', background_color: 'black', border_hover_color: '#ccc', text_hover_color: '#000', background_hover_color: '#fff', images: false, mouse: 'press', onChange: function(page) { list(page); } }); }); function list(start){ $.ajax({ url:"article.php", type:"post", data:{id:start}, dataType:"html", success: function(result){ $("#pagetxt").html(result); }, error: function(){ alert('请求超时，请稍候再试'); } }) } </script>
注意，
1. 首先加载 list(0); 是在article类中去调用方法,输出第0页的内容.
2. 属性count通过PHP计算出总页数$page，分页的总页数,不支持动态改变,不可写非int型数.个人建议在进入页面的时候就把页数传过来。
3. 还要说明的是属性onChange：当点击页码时，调用函数，该函数实现了异步提交页码参数给article.php来处理.
2、引用CSS:
<link rel="stylesheet" href="css/style.css"/>
样式有官方的,也可通过自己进行修改.
3、index.php初始页面。
必须要显示一个初始的文章列表，代码如下
<body> <div class="demo"> <h4>分页效果</h4> <div id="pagetxt"> </div> <div id="demo"></div> </div> </body>
4.article.php代码。
该代码用来获取index.php提交过来的页码，查询数据库，并将输出结果。代码如下：
include "Model.php"; //加载model数据库的类 $model=new Model('stu'); //echo $_GET['id'];exit; //var_dump($_POST);exit; $page=intval($_POST['id']); //获取页码 if(empty($id)){ //判断当没有时转为0 $page=0; } //1.总记录数 $totle=$model->count(); //echo $totle;exit; //2.每页显示数 $pagesize=2; //3.总页数 $page_max=ceil($totle/$pagesize); //echo $page_max;exit; //4.限制条数 $page=min($page,$page_max); //防止点下一页,超过最大值 //echo $page;exit; $page=max($page,1); //防止点下一页,超过最小值 if(isset($page)){ $startPage=($page-1)*$pagesize; //文章内容的偏移量 //var_dump($startPage);exit; $model->limit=array($startPage,$pagesize); //limit限制 $model->order="id desc"; //排序的方法 //var_dump($model->limit);exit; $data=$model->select(); //返回一个数组 foreach($data as $row){ //进行foreach循环输出内容,当然也可以include进来. $age=$row['age']; echo "<p><span>$age</span><a href='view-blog-".$row['id'].".html' target='_blank'> ".$row['name']."</a></p>"; //输出文章列表 } }
第二种方法
别的地方没什么大变化,只是加载script的时候有所变化.
但是原理是一样的,只是没有用AJAX方法,用Jquery的load方法.变换成$_GET传参而已.在article中要用$_GET接受!
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.jpaginate.js"></script> <script type="text/javascript"> $(function(){ $("#pagetxt").load("article.php?id=0"); $("#demo").paginate({ count : 10, start : 1, display : 3, border : true, border_color : '#BEF8B8', text_color : '#79B5E3', background_color : '#E3F2E1', border_hover_color : '#68BA64', text_hover_color : '#2573AF', background_hover_color : '#CAE6C6', images : false, mouse : 'press', onChange : function(page){ //alert(page); $("#pagetxt").load("article.php?id="+page); } }); }); </script>
浙公网安备 33010602011771号