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 相关文章推荐
JS去除字符串两端空格的简单实例
Dec 27 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
vue better-scroll插件使用详解
Jan 25 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
JsChart组件使用详解
Mar 04 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 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生成月历代码
2007/06/14 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
PHP的全局错误处理详解
2016/04/25 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
JavaScript类和继承 constructor属性
2010/03/04 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
tensorflow多维张量计算实例
2020/02/11 Python
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
大三预备党员入党思想汇报
2014/01/08 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
大学班级计划书
2014/04/29 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
经典团队口号
2014/06/06 职场文书
预防煤气中毒方案
2014/06/16 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
MySQL存储过程及语法详解
2022/08/05 MySQL