jquery.pagination.js分页demo
公用jquery.pagination.js
/**
* This jQuery plugin displays pagination links inside the selected elements.
*
* @author Gabriel Birke (birke *at* d-scribe *dot* de)
* @version 1.2
* @param {int} maxentries Number of entries to paginate
* @param {Object} opts Several options (see README for documentation)
* @return {Object} jQuery Object
*/
jQuery.fn.pagination = function(maxentries, opts){
opts = jQuery.extend({
items_per_page:10,
num_display_entries:10,
current_page:0,
num_edge_entries:0,
link_to:"#",
prev_text:"Prev",
next_text:"Next",
ellipse_text:"...",
prev_show_always:true,
next_show_always:true,
callback:function(){return false;}
},opts||{}); return this.each(function() {
/**
* 计算最大分页显示数目
*/
function numPages() {
return Math.ceil(maxentries/opts.items_per_page);
}
/**
* 极端分页的起始和结束点,这取决于current_page 和 num_display_entries.
* @返回 {数组(Array)}
*/
function getInterval() {
var ne_half = Math.ceil(opts.num_display_entries/2);
var np = numPages();
var upper_limit = np-opts.num_display_entries;
var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
return [start,end];
} /**
* 分页链接事件处理函数
* @参数 {int} page_id 为新页码
*/
function pageSelected(page_id, evt){
current_page = page_id;
drawLinks();
var continuePropagation = opts.callback(page_id, panel);
if (!continuePropagation) {
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
return continuePropagation;
} /**
* 此函数将分页链接插入到容器元素中
*/
function drawLinks() {
panel.empty();
var interval = getInterval();
var np = numPages();
// 这个辅助函数返回一个处理函数调用有着正确page_id的pageSelected。
var getClickHandler = function(page_id) {
return function(evt){ return pageSelected(page_id,evt); }
}
//辅助函数用来产生一个单链接(如果不是当前页则产生span标签)
var appendItem = function(page_id, appendopts){
page_id = page_id<0?0:(page_id<np?page_id:np-1); // 规范page id值
appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});
if(page_id == current_page){
var lnk = jQuery("<span class='current'>"+(appendopts.text)+"</span>");
}else{
var lnk = jQuery("<a>"+(appendopts.text)+"</a>")
.bind("click", getClickHandler(page_id))
.attr('href', opts.link_to.replace(/__id__/,page_id));
}
if(appendopts.classes){lnk.addClass(appendopts.classes);}
panel.append(lnk);
}
// 产生"Previous"-链接
if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
}
// 产生起始点
if (interval[0] > 0 && opts.num_edge_entries > 0)
{
var end = Math.min(opts.num_edge_entries, interval[0]);
for(var i=0; i<end; i++) {
appendItem(i);
}
if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
{
jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
}
}
// 产生内部的些链接
for(var i=interval[0]; i<interval[1]; i++) {
appendItem(i);
}
// 产生结束点
if (interval[1] < np && opts.num_edge_entries > 0)
{
if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
{
jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
}
var begin = Math.max(np-opts.num_edge_entries, interval[1]);
for(var i=begin; i<np; i++) {
appendItem(i);
} }
// 产生 "Next"-链接
if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
appendItem(current_page+1,{text:opts.next_text, classes:"next"});
}
} //从选项中提取current_page
var current_page = opts.current_page;
//创建一个显示条数和每页显示条数值
maxentries = (!maxentries || maxentries < 0)?1:maxentries;
opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
//存储DOM元素,以方便从所有的内部结构中获取
var panel = jQuery(this);
// 获得附加功能的元素
this.selectPage = function(page_id){ pageSelected(page_id);}
this.prevPage = function(){
if (current_page > 0) {
pageSelected(current_page - 1);
return true;
}
else {
return false;
}
}
this.nextPage = function(){
if(current_page < numPages()-1) {
pageSelected(current_page+1);
return true;
}
else {
return false;
}
}
// 所有初始化完成,绘制链接
drawLinks();
// 回调函数
opts.callback(current_page, this);
});
}
在js中调用:
$("#pagination").pagination($("#totalRecords").text(),{
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
current_page:parseInt(obj.currPageIndex),
items_per_page:parseInt(obj.pageSize),
prev_text: "<<",
next_text: ">>",
callback:function(pageIndex,container){
if(obj.isPageInit)
{
obj.isPageInit=false;
}
else
{
obj.currPageIndex=pageIndex;
obj.getBookPager();
return false;
} }
});
jsp页面:
<div class="row-fluid div-pager">
<div class="span4">
<div class="pageTip">
当前为第<input type="hidden" id="hd-pageSize"
value="${pageInfo.pageSize}"> <input type="hidden" id="hd-pageIndex"
value="${pageInfo.pageIndex}">${pageInfo.totalRecord==0?0:
pageInfo.pageSize*pageInfo.pageIndex+1}
到第${(pageInfo.pageIndex+1)*pageInfo.pageSize>pageInfo.totalRecord?pageInfo.totalRecord:(pageInfo.pageIndex+1)*pageInfo.pageSize}
条数据;总共有<span id="totalRecords">${pageInfo.totalRecord}</span>条记录
</div>
</div>
<div class="span7 pull-right">
<div class=" pull-right">到第<input type="number" name="toNo" value="${toNo}" min="1" max="${pageInfo.totalPageNumber}" style="width:40px;height:15px;margin-bottom:3px;padding:0 3px">页 <a href="#" class="toPageNo" style="color:black">确定</a></div>
<div id="pagination" class="pagination pull-right"></div> </div> </div>
jquery.pagination.js分页demo的更多相关文章
- jquery.pagination.js分页
参数说明 参数名 描述 参数值 maxentries 总条目数 必选参数,整数 items_per_page 每页显示的条目数 ...
- (推荐)jquery.pagination.js分页
序言 本来想自己对这个分页使用做一些总结的,但发现大神们已经总结的很好了.所以给推荐一下. 转自:http://www.cnblogs.com/knowledgesea/archive/2013/01 ...
- js jquery.pagination.js分页
1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css( ...
- [转]jquery.pagination.js分页
本文转自:http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html 序言 这一款js分页使用起来很爽,自己经常用,做项目时 ...
- jquery.pagination.js分页插件的使用
Pagination的相关参数: Pagination使用的核心代码: //回调函数 function pageselectCallback(page_index, j ...
- ajax分页实现,jquery.pagination.js
1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代 ...
- 浅谈jQuery Pagination Ajax 分页插件的使用
插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件 ...
- Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页
本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...
- Spring+Mybatis+jQuery.Pagination.js异步分页及JsonConfig的使用
在开发工作中经常用到异步分页,这里简单整理一下资料. 一.Controller方法 package com.lwj.controller; import javax.servlet.http.Http ...
随机推荐
- 在CentOS上使用Docker镜像安装Jenkins
1.必须先在CentOS上安装Docker,使用以下命名先在Docker Hub上搜索Jenkins镜像 docker search jenkins 2.下载Jenkins镜像,命令如下:(我下载的是 ...
- Spring Transaction 使用入门
一.开篇陈述 1.1 写文缘由 最近在系统学习spring框架IoC.AOP.Transaction相关的知识点,准备写三篇随笔记录学习过程中的感悟.这是第一篇,记录spring Transactio ...
- FZU Monthly-201905 tutorial
FZU Monthly-201905 tutorial 题目(难度递增) easy easy-medium medium medium-hard hard 思维难度 AB H DG CE F A. C ...
- NIO网络访问模式实践
1.创建NioNest12类 一个线程监听5个端口的事件 public class NioTest12 { public static void main(String[] args) throws ...
- APISIX系列 | 使用 docker-apisix 安装APISIX服务
官方仓库:https://github.com/iresty/docker-apisix 官方仓库 拉取 git clone git@github.com:iresty/docker-apisix.g ...
- PHP 命令行参数解析工具类
<?php/** * 命令行参数解析工具类 * @author guolinchao * @email luoyecb@163.com */class CommandLine{ // store ...
- malloc分配到一块内存,读写操作时却发生segmentation falt的奇怪问题。
期初现象:malloc一块内存,读写操作时发生segmentation falt.一般来讲malloc倘若失败应该抛出异常,所以malloc返回一个指针后,这个指针应该都是可用的,况且是进行读操作. ...
- SQLServer : 找中间日期
假设找 一个日期居于[ 2022-03-10, 2022-05-11 ]的正中间
- 【转】SQL2008 链接Oracle 调用存储过程
1. SQL链接ORACLE 都是可视化的操作 如下图: 红色框选的是oracle的数据驱动,如果没有这个驱动 那需要单独安装oracle的client端 装完以后就有了. 2.在创建之前,在SQLS ...
- Web容器中DefaultServlet详解 JspServlet DefaultServlet
Web容器中DefaultServlet详解 https://blog.csdn.net/qq_30920821/article/details/78328608 Web容器中DefaultServl ...