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 相关文章推荐
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
php str_pad 函数用法简介
2009/07/11 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
2014过年倒计时示例
2014/01/31 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
xmlHTTP实例
2006/10/24 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
中学劳技课教师的自我评价
2014/02/05 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
普通党员个人整改措施
2014/10/27 职场文书
财务总监岗位职责
2015/02/03 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android