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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
brook javascript框架介绍
Oct 10 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
php IP转换整形(ip2long)的详解
2013/06/06 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
python实现小球弹跳效果
2019/05/10 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python实现指定ip端口扫描方式
2019/12/17 Python
python异常处理和日志处理方式
2019/12/24 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
上课玩手机检讨书
2014/02/08 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
《长征》教学反思
2014/04/27 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
葬礼主持词
2015/07/02 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
Golang表示枚举类型的详细讲解
2021/09/04 Golang
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android