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 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
jQuery get和post 方法传值注意事项
Nov 03 Javascript
js jquery数组介绍
Jul 15 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
vue的keep-alive用法技巧
Aug 15 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
Json实现传值到后台代码实例
2020/06/30 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Django logging配置及使用详解
2019/07/23 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
简述数据库的设计过程
2015/06/22 面试题
美化环境标语
2014/06/20 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
庆七一宣传标语
2014/10/08 职场文书
免职证明样本
2014/10/23 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
考研复习计划
2015/01/19 职场文书
消防安全月活动总结
2015/05/08 职场文书
在Python 中将类对象序列化为JSON
2022/04/06 Python