jQuery插件pagination实现分页特效

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

使用方法

1.加载插件和jQuery

1
2
3

<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.函数调用

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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

时间： 2024-08-22 14:48:49

jQuery插件pagination实现分页特效的相关文章

jQuery插件pagination实现分页特效_jquery

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

jQuery插件实现无缝滚动特效_jquery

首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b

jQuery插件pagination实现无刷新分页_jquery

这篇文章我们主要看看简单的使用jQuery pagination这个插件来实现无刷新分页,使用jQuery pagination主要作用在于分页样式的显示,而无刷新的主要原理还是使用Ajax,具体看下文: 首先,我们引入jQuery文件.jQuery pagination文件和jQuery Templates文件. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquer

jquery插件pagination实现无刷新ajax分页_jquery

1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代码 /** * This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version

jQuery EasyUI Pagination实现分页的常用方法_jquery

EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一.使用 datagrid 默认机制 后台: public JsonResult GetQuestionUnit() { // easyui datagrid 自身会通过 post 的形式传递 rows and page int pageSize = Convert.ToInt32(Request["rows"]); int pageN

jQuery插件分享之分页插件jqPagination_jquery

使用方法: 添加 jQuery 类库.jqPagination 插件的 JS 和 CSS 文件 复制代码 代码如下: <link rel="stylesheet" href="jqpagination.css"/><script src="jquery-1.6.2.min.js"></script><script src="jquery.jqpagination.min.js">

完美兼容各大浏览器的jQuery插件实现图片切换特效_jquery

文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件),对网友们的学习是很有帮助的,虽然样式不太好看,大家可以自己写,好好利用哦... JS代码部分: 复制代码 代码如下: (function ($) {     var//申明全局变量         _eleTemp,//缓存变量         _eleThis = $(this),//当前元素         _eleImg = $('.zd-imgChange-img'),//图片组元素   

jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版_jquery

原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面 二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持te

Ajax分页插件Pagination从前台jQuery到后端java总结_jquery

困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图 下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(