欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 其它代码

5款漂亮的分页插件

所属栏目:其它代码更新时间:2016-07-03原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明


使用分页插件我们可以只关注从后台获取总页数和计算当前页数,而不需要去关心怎么显示页码,什么时候该显示哪些页码,该隐藏哪些代码。这样便给我们开发人员带来了很多的方便。

使用步骤

1、引用以下文件

<link href="css/style.css" rel="stylesheet">
<script src="Scripts/jquery-1.4.1.js"></script>
<script src="Scripts/jquery.paginate.js"></script>

2、在要运用分页的地方放上指定ID的 div

<div id="demo1">   
</div>

3、调用以下JS代码,当然可以自行配制参数

 //分页$("#demo1").paginate({
    count: pageCount,
    start: index,
    display: 20,
    border: true,
    onChange: function(page) {
        getDataByPage(page);
    }
});

参数配置

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

当鼠标点击页码回调的函数,参数为点击的页码


用法介绍

要把这款分页插件运用到自己的页面中去,必须要配置的3个参数是 count、 start 和 onChange(参见上面的含义)

 $("#demo1").paginate({
    count: pageCount,
    start: index,
    display: 20,
    onChange: function(page) {
        location.href = "#" + page;
        getDataByPage(page);
    }
});

1、一般动态分页的使用
形如 list.aspx?page=1 (这里以 .NET 来举例)这样的分页可以直接在aspx页面中配置好主要的参数,直接在后台获取总页数,通过参数获取当前页数填充到 JS代码中,onChange事件可以这样写:

 onChange: function (page) {
      location.href = "list.aspx?id=" + page;
 }

2、ajax无刷新分页的使用
要用在ajax无刷新分页中也很简单。我们在前台初始化的时候向后台发送请求获取总页数,然后填充到JS中,(注意,要在ajax的post方法体内去用接收数据填充 分页的 count 参数),然后调用 onChange 事件

 onChange: function(page) {
    getDataByPage(page); //这个是获取指定页码数据的函数}

3、静态生成页的使用

对于静态生成的页面中,我们需要在后台将分页函数的参数配置好,然后生成静态页就行了,不需要动态去配置。


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1JS动态五星评分插件代码

2淘宝商品jQuery列表多条件查询特效代码

3兼容所有浏览器的设为首页收藏本站js代码

4JS实现文字替换成图片或者其它内容

5js实现网页多个div定时轮流显示的代码

6IE6旧版浏览器提示升级代码模板下载

7SimplePager-非常简洁优秀的 jQuery 分页插件-同页面可重复使用

8后台登录jquery网页全屏背景图片自动切换代码

9百度404页面JS倒计时返回页面代码

10jQuery公司大事记、历程时间轴专用代码

最新更新的

1JS点击显示内容再点击隐藏

2JS点击加大/减小字号的代码

3jQuery点击展开与收缩查看更多效果代码

4JqueryPagination分页插件

5一款漂亮方便调用的jQuery前端分页

6JS返回上一页/返回上一页并刷新

7百度404页面JS倒计时返回页面代码

8JS赋值给指定元素的父级元素

9JS实现301跳转的JS代码

10JS拆分文本再组合