jpaginate ajax,jQuery jPaginate插件–PHP+AJAX分页效果

有点时间没有写新的文章了，跑外地逛了几天，然后回来做项目做了快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分页示例下载

相关日志：