有点时间没有写新的文章了,跑外地逛了几天,然后回来做项目做了快1星期,总算是告一段落了。抽空把项目用到的比较有意思的抽出来整理下
调用
$(elementID).paginate();
属性
count: 总页数。
start: 开始显示的页数
display: 数字,分页条显示的页数
border: 是否显示页码的边框。(true/false)
border_color: 设置边框的颜色
text_color: 设置页码的颜色
background_color: 设置页码的背景色
border_hover_color: 设置鼠标滑向页码时页码边框的颜色。
text_hover_color: 设置鼠标滑向页码时页码的颜色。
background_hover_color: 设置鼠标滑向页码时页码背景的颜色。
images: 是否显示页码导航箭头(方向箭头)(true/false)
mouse: 设置为'press'时,当鼠标滑向导航箭头时,页码随之滚动;设置为'slide'时,鼠标单击一次导航箭头页码滚动一次。
onChange: 当单击页码时,回调函数.
演示
官方DEMO:官方DEMO
AJAX分页示例
1.引入jquery,jPaginate和css
2. 必须先初始显示当前页面的内容
这是第一页
3. 为该分页加载配置
$(function(){
$("#digg").paginate({
count : 3,//总页数,一般从数据库中取出所有条数然后除以要展示的条数,在用ceil取整
start : 1,
display : 5,
border : true,
border_color : '#ddd',
text_color : '#aaa',
background_color : '#f0f0f0',
border_hover_color : '#35455E',
text_hover_color : '#35455E',
background_hover_color : '#f0f0f0',
images : false,
mouse : 'press',
onChange : function(page){//回调 ajax像page页面请求数据
$("#pagecontent").load("page.php?page="+page);
}
});
$("#pagecontent").ajaxSend(function(event, request, settings){//数据加载前显示loading图片
$(this).html('
});
});
4. page页面,查询到改页面要展示的内容,然后反馈给index页
echo '这是ajax调用的第'.$_GET['page'].'页';
?>
ajax分页演示
ajax分页演示:Demo
下载
AJAX分页示例下载
相关日志: