jpaginate是一个动态的滚动分页基于jQuery
插件。其表现就像一个分页按钮。非常有趣的是,这些按钮可以滚动,我们可以
控制按钮的前后滚动通过点击或
鼠标滑动到小
箭头两边的点。
调用jpaginate插件的
方法很简单:
$(elementid)Paginate()。
属性设置 值得欣慰的是,jpaginate提供了大量的
性能配置,你可以轻松地定制所需的分页效果。
设置方法,例如:
(elementid美元)。Paginate({
计数:80,
开始:1,
})…
计数:数字,总记录数。
开始:数字,开始
显示的页数,例如:3是第三页的开始。
显示:数字,由分页栏,显示的页面数如:5显示5页的数量在同一时间。
是否边框:显示页码的边框。
border_color:设置边框的颜色,如# d3d3d3 。
text_color:设置页码的颜色,如# 68ba64 。
background_color:设置页码的
背景色,如# f7f7f7 。
border_hover_color页码:设置边框的颜色当鼠标滑到页面数。
text_hover_color:设置页码的颜色,当鼠标滑到页面数。
background_hover_color:设置页码背景颜色,当鼠标滑到页面数。
图像:显示页码导航箭头(方向箭头)(true false)
当鼠标:设置to'press ',当鼠标滑到导航箭头,页码就会向前滚动。当设置to'slide ',点击导航键的页号一次。
OnChange:当页面被点击,回调
函数。
示例
应用程序:实现ajax分页效果
首先,准备的index.php,用于页面列出的博客文章。
1。引用JS:
$(函数(){())
$(#演示)。Paginate({
计数:,
开始:1,
显示器:5,
边界:真,
border_color:# bef8b8,
text_color:# 79b5e3,
background_color:# e3f2e1,
border_hover_color:# 68ba64,
text_hover_color:# 2573af,
background_hover_color:# cae6c6,
图片:虚假,
老鼠:'press,
OnChange:
功能(页){
$(# pagetxt)。负荷(的文章。phpid =+页);
}
});
});
注意,属性的插件设置上面
详细描述,和财产计数计算页页美元总数通过PHP,这是由article.php.also注意onChange属性获得:在调用函数时点击页面,并对article.php到article.php对异步提交页面
参数实现的功能,通过读取数据库表和书籍的名单,结果返回页面,这是AJAX。当然,我只是做一个简单的演示,在这里,如果你需要更多的异步的结果,你可以使用jQuery的
文档。
2。
参考CSS:
的jpaginate官方提供了一个导航栏的风格,你也可以自己写一个很酷的风格。
3、初始页index.php。
有必要用以下代码显示文章的初始列表
演示3:ajax实现ajax分页效果
添加PHP代码为pagetxt ID的div:
查询=
而($行= $数据库-> fetch_array($查询)){
为出版
日期=日期(当前
回声$出版日期
$行{标题}。
4、article.php代码。
本代码是用于获得提交的index.php页面数量,查询数据库,并输出结果,代码如下:
include_once(常见。PHP); / /数据库
连接文件 ID =美元美元_get { 'id' }; / /页码
结果
美元美元总= DB -> db_num_rows($结果); / /总记录数
$ PageSize = 5; / /页码
$页=细胞($总 / / $ PageSize);/总页数
如果(isset($id)){
$起始=($ Id-1)* $ PageSize;
查询=
$ PageSize );
而($行= $数据库-> fetch_array($查询)){
为出版日期=日期(当前
回声$出版日期
$行。
}
}
以上
介绍的jpaginate在Ajax分页效果PHP+jQuery实现插件的应用,希望对大家有所帮助的研究。