jQuery插件pagination实现分页特效


Posted in Javascript onApril 12, 2015

实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性读出来的,效率会差些,插件支持众多参数的自定义配置功能,还是很不错的,大家可以根据自己的想法进行改进。

jQuery插件pagination实现分页特效

使用方法:

1.加载插件和jQuery

<link rel="stylesheet" href="pagination.css"> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.pagination.js"></script>

2.HTML内容

<div class="pagination"></div>

3.函数调用

<script type="text/javascript"> 
function pageselectCallback(page_index, jq){ 
        alert(page_index); 
        return false; 
      } 
$(document).ready(function(){ 
$(".pagination").pagination(100, { 
  callback: pageselectCallback, 
  
   num_edge_entries: 1, 
  
  }); 
}); 
</script>

参数配置解释

参数名 参数说明 可选值 默认值

callback 点击分页按钮的回调函数 函数 function(){return false;}
current_page 初始化时选中的页码 数字 0
items_per_page 每页每页显示的记录条数 数字 10
link_to 分页链接 字符串 #
num_display_entries 最多显示的页码数 数字 11
next_text ‘下一页'显示的文字 字符串 Next
next_show_always 如果设置为false‘下一页'按钮只有在还能增加页码的情况下才显示 布尔值 true
prev_show_always 如果设置为false‘上一页'按钮只有在还能导航到前一页的情况下才显示 布尔值 true
prev_text ‘上一页'显示的文字 字符串 Previous
num_edge_entries 如果设为1,那么永远会显示首页和末页 1或0 0
ellipse_text 从当前页码段到首页或末页之间的标识字符串 字符串 …
load_first_page 如果设置为true,那么回调函数将在插件初始化时就执行 布尔值 true

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
js实现的网页颜色代码表全集
Jul 17 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 #Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 #Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 #Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 #Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 #Javascript
jQuery实现简单二级下拉菜单
Apr 12 #Javascript
纯JS实现旋转图片3D展示效果
Apr 12 #Javascript
You might like
php的计数器程序
2006/10/09 PHP
PHP中的cookie
2006/11/26 PHP
初级的用php写的采集程序
2007/03/16 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
Python 元类使用说明
2009/12/18 Python
Python functools模块学习总结
2015/05/09 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
python批量获取html内body内容的实例
2019/01/02 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
预备党员介绍人意见
2015/06/01 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
Python中time与datetime模块使用方法详解
2022/03/31 Python
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis