一款Jquery 分页插件的改造方法(服务器端分页)

分页几乎是每个外部程序必不可少的东西,在webform时代很多人都用过AspNetPager这个用户控件吧,用的人之多其实就在于它的优点:传给它几个参数就可以生成像样的分页,其实这个也是绝大多数程序员(包括我)的致命缺点:样式..,我对于咱们来说用尝试用CSS把一个模块调美观好看所花的时间远远超过了实现功能所需的时间- -!
现在越来越多做web的开始采用.NET MVC框架,抛开一切服务器控件,回归正宗的B/S编程,享受灵活控制好处之余,也得花费很多功夫,很多地方都得自己去实现,例如分页这样的东西。简单实现功能肯定很简单,但是要做到好用,通用,性能好,易于修改也不是一个很简单的事情,所以各种JS分页控件大显身手,如jquery pager、jquery Pagination等等,调用很方便,生成效果也很好,唯一缺点就是都是内存分页,数据量少点还好,如果成千上万几百上千万数据可就要命了。要是能有一个调用方便还能配合进行服务端分页的前端控件该多好呢:)
说了这么多接下来就给大家看看我利用一个富客户端UI框架(DWZ)中分离改造出来的一个JS分页控件,先看看效果图:

页面代码:

代码如下:

<div class="panelBar">
<div class="pages">
<span>显示</span>
@Html.DropDownList("numPerPage", ViewBag.dNumPerPage as SelectList, new { onchange = "PageBreak({numPerPage:this.value})" })
<span>条,共 @Model.TotalCount 条</span>
</div>
<div class="pagination" totalcount="@Model.TotalCount" numperpage="@Model.NumPerPage"
pagenumshown="@Model.PageNumShown" currentpage="@Model.CurrentPage">
</div>

其实这个完全可以写成HtmlHelper调用,例如 Html.Pagination(ViewBag.dNumPerPage,Model.TotalCount,Model.NumPerPage,Model.PageNumShown,Model.CurrentPage)
这样,一条语句就可以。
原理就是用js通过获取 class="pagination" 的div的自定义属性:总页数TotalCount,每页多少条NumPerPage ,显示多少页码 PageNumShown,当前页数CurrentPage,
然后将这四个属性传给分页js,分页js内利用这几个关键属性进行计算,然后将预制好的分页模板进行替换,展现出分页效果。
为了好让美工根据项目整体风格来对分页进行调整,实现好的分工合作的原则,这里分页的js和CSS和分页替换模板是完全分开的,不至于程序看CSS晕,美工看JS晕。
分页js分为两部分,一部分只负责根据参数计算分页(pagination.js),一部分是作之前的准备工作的(core.js),一些参数的预制,在这里其实只有一个就是分页模板的位置参数,还有一些分页内部用到的自定义扩展函数,分页模板为了美工便于修改观察,不混在js里面,而又便于js利用,这里用XML的格式(pagination.xml),先把代码贴出来
 core.js:


代码如下:

(function($){
$.extend(String.prototype, {
isPositiveInteger:function(){
return (new RegExp(/^[1-9]\d*$/).test(this));
},
replaceAll:function(os, ns) {
return this.replace(new RegExp(os,"gm"),ns);
}
});
$.fn.extend({
hoverClass: function(className){
var _className = className || "hover";
return this.each(function(){
$(this).hover(function(){
$(this).addClass(_className);
},function(){
$(this).removeClass(_className);
});
});
}
});
})(jQuery);
var DWZ = {
frag: {},
init: function (pageFrag) {
$.ajax({
type: 'GET',
url: pageFrag,
dataType: 'xml',
timeout: 50000,
cache: false,
error: function (xhr) {
alert('Error loading XML document: ' + pageFrag + "\nHttp status: " + xhr.status + " " + xhr.statusText);
},
success: function (xml) {
DWZ.frag["pagination"]= $(xml).find("#pagination").text();
}
});
}
};

pagination.js:


代码如下:

(function($){
$.fn.pagination = function(opts){
var setting = {
first$:"li.j-first", prev$:"li.j-prev", next$:"li.j-next", last$:"li.j-last", nums$:"li.j-num>a", jumpto$:"li.jumpto",
pageNumFrag:'<li class="#liClass#"><a href="#">#pageNum#</a></li>'
};
return this.each(function(){
var $this = $(this);
var pc = new Pagination(opts);
var interval = pc.getInterval();
var pageNumFrag = '';
for (var i=interval.start; i<interval.end;i++){
pageNumFrag += setting.pageNumFrag.replaceAll("#pageNum#", i).replaceAll("#liClass#", i==pc.getCurrentPage() ? 'selected j-num' : 'j-num');
}
$this.html(DWZ.frag["pagination"].replaceAll("#pageNumFrag#", pageNumFrag).replaceAll("#currentPage#", pc.getCurrentPage())).find("li").hoverClass();
var $first = $this.find(setting.first$);
var $prev = $this.find(setting.prev$);
var $next = $this.find(setting.next$);
var $last = $this.find(setting.last$);
if (pc.hasPrev()){
$first.add($prev).find(">span").hide();
_bindEvent($prev, pc.getCurrentPage()-1, pc.targetType());
_bindEvent($first, 1, pc.targetType());
} else {
$first.add($prev).addClass("disabled").find(">a").hide();
}
if (pc.hasNext()) {
$next.add($last).find(">span").hide();
_bindEvent($next, pc.getCurrentPage()+1, pc.targetType());
_bindEvent($last, pc.numPages(), pc.targetType());
} else {
$next.add($last).addClass("disabled").find(">a").hide();
}
$this.find(setting.nums$).each(function(i){
_bindEvent($(this), i+interval.start, pc.targetType());
});
$this.find(setting.jumpto$).each(function(){
var $this = $(this);
var $inputBox = $this.find(":text");
var $button = $this.find(":button");
$button.click(function(event){
var pageNum = $inputBox.val();
if (pageNum && pageNum.isPositiveInteger()) {
PageBreak({ pageNum: pageNum });
}
});
$inputBox.keyup(function(event){
if (event.keyCode == 13) $button.click();
});
});
});
function _bindEvent(jTarget, pageNum, targetType){
jTarget.bind("click", {pageNum:pageNum}, function(event){
PageBreak({ pageNum: event.data.pageNum });
event.preventDefault();
});
}
}
var Pagination = function(opts) {
this.opts = $.extend({
targetType:"navTab", // navTab, dialog
totalCount:0,
numPerPage:10,
pageNumShown:10,
currentPage:1,
callback:function(){return false;}
}, opts);
}
$.extend(Pagination.prototype, {
targetType:function(){return this.opts.targetType},
numPages:function() {
return Math.ceil(this.opts.totalCount/this.opts.numPerPage);
},
getInterval:function(){
var ne_half = Math.ceil(this.opts.pageNumShown/2);
var np = this.numPages();
var upper_limit = np - this.opts.pageNumShown;
var start = this.getCurrentPage() > ne_half ? Math.max( Math.min(this.getCurrentPage() - ne_half, upper_limit), 0 ) : 0;
var end = this.getCurrentPage() > ne_half ? Math.min(this.getCurrentPage()+ne_half, np) : Math.min(this.opts.pageNumShown, np);
return {start:start+1, end:end+1};
},
getCurrentPage:function(){
var currentPage = parseInt(this.opts.currentPage);
if (isNaN(currentPage)) return 1;
return currentPage;
},
hasPrev:function(){
return this.getCurrentPage() > 1;
},
hasNext:function(){
return this.getCurrentPage() < this.numPages();
}
});
})(jQuery);

分页模板pagination.xml:


代码如下:

<?xml version="1.0" encoding="utf-8"?>
<_AJAX_>
<!-- pagination -->
<_PAGE_ id="pagination"><![CDATA[
<ul>
<li class="j-first">
<a class="first" href="#"><span>首页</span></a>
<span class="first"><span>首页</span></span>
</li>
<li class="j-prev">
<a class="previous" href="#"><span>上一页</span></a>
<span class="previous"><span>上一页</span></span>
</li>
#pageNumFrag#
<li class="j-next">
<a class="next" href="#"><span>下一页</span></a>
<span class="next"><span>下一页</span></span>
</li>
<li class="j-last">
<a class="last" href="#"><span>末页</span></a>
<span class="last"><span>末页</span></span>
</li>
<li class="jumpto"><input class="jumptotext" type="text" value="#currentPage#" /><input class="goto" type="button" value="确定" /></li>
</ul>
]]></_PAGE_>
</_AJAX_>

pagination.css:


代码如下:

@charset "utf-8";
/* CSS Document */
/* public */
ul li,ol li,dt,dd {list-style:none;}
a:link{
color:#000000;
text-decoration:none;
}
a:visited{
color:#000000;
text-decoration:none;
}
a:hover{
color:#000000;
text-decoration:underline;
}
/* pagination */
.panelBar{
margin-top:12px;
height:26px;
line-height:26px;
}
.panelBar ul{
float:left;
}
.panelBar ul li{
float:left;
}
.disabled{
padding:0 6px;
}
.j-num{
padding:0 4px;
}
.pages
{
margin-top:12px;
float:left;
}
.pagination
{
float:left;
padding-left:50px;
}
.pagination li, .pagination li.hover { padding:0 0 0 5px;}
.pagination a, .pagination li.hover a, .pagination li span { float:left; display:block; padding:0 5px 0 0; text-decoration:none; line-height:23px; background-position:100% -150px;}
.pagination li.selected a{color:red; font-weight:bold;}
.pagination span, .pagination li.hover span { float:left; display:block; height:23px; line-height:23px; cursor:pointer;}
.pagination li .first span, .panelBar li .previous span { padding:0 0 0 10px;}
.pagination li .next span, .panelBar li .last span { padding:0 10px 0 0;}
.pagination li .first span { background:url(images/pagination/pagination_first_a.gif) left 5px no-repeat;}
.pagination li .previous span { background:url(images/pagination/pagination_previous_a.gif) left 5px no-repeat;}
.pagination li .next span { background:url(images/pagination/pagination_next_a.gif) right 5px no-repeat;}
.pagination li .last span { background:url(images/pagination/pagination_last_a.gif) right 5px no-repeat;}
.pagination li .last { margin-right:5px;}
.pagination li.disabled { background:none;}
.pagination li.disabled span, .grid .pagination li.disabled a { background-position:0 100px; cursor:default;}
.pagination li.disabled span span { color:#666;}
.pagination li.disabled .first span { background:url(images/pagination/pagination_first_span.gif) left 5px no-repeat;}
.pagination li.disabled .previous span { background:url(images/pagination/pagination_previous_span.gif) left 5px no-repeat;}
.pagination li.disabled .next span { background:url(images/pagination/pagination_next_span.gif) right 5px no-repeat;}
.pagination li.disabled .last span { background:url(images/pagination/pagination_last_span.gif) right 5px no-repeat;}
.pagination li.disabled .last { margin-right:5px;}
.pagination li.jumpto { padding:2px 2px 0 7px; background-position:0 -200px;}
.pagination li.jumpto .jumptotext { float:left; width:30px; height:15px; padding:1px; border-color:#acaeaf; background:#ffffff; border:1px solid #9999cc;}
.pagination li.jumpto .goto { float:left; display:block; overflow:hidden; width:16px; height:19px; border:0; text-indent:-1000px; background:url(images/pagination/pagination_goto.gif) no-repeat; cursor:pointer;}

我看CSS也头疼,这个是我找一个朋友写的,自己又改了改
接下来讲讲使用方法:
首先 指定自己分页模板的路径 DWZ.init("js/pagination.xml"); 然后调用分页:


代码如下:

$(function(){
$("div.pagination").each(function () {
var $this = $(this);
$this.pagination({
totalCount: $this.attr("totalCount"),
numPerPage: $this.attr("numPerPage"),
pageNumShown: $this.attr("pageNumShown"),
currentPage: $this.attr("currentPage")
});
});
});

这里为什么用each呢,为啥不直接$("div.pagination").pagination({})呢,大家应该想到了,有挺多时候用户喜欢在列表的上下都放分页便于操作,这两块js其实可以单独放一个文件,需要用到分页的文件引用即可,因为程序真正用到的是web和服务器端交换所关心的数据,totalCount numPerPage pageNumShown currentPage ,之前所做的所有都只是实现好用通用的框架。现在无需改动的东西都做好了,怎么实现交互呢,很简单:点击页码或者选择每页显示下拉框或者点击go按钮时候都会触发一个自定义函数 PageBreak ,这个函数内部就大家想实现什么具体去写,例如


代码如下:

function PageBreak(args) {
alert(args["pageNum"]||args["numPerPage"]);
}

在这里面可以用js取得当前的totalCount numPerPage pageNumShown curren,和页面上筛选的form的值一并ajax提交给后端页面,然后接收返回的数据,加载到指定位置,并且注意给<div class="pagination" >这个DIV的自定义属性重新赋值然后调用一下pagination方法即可,不知道写清楚没有,先去吃饭了,如果有问题可以留言,如果不清楚具体使用的人多,打算后续写两种用法,一种是返回数据直接返回这个div的,一个是只返回表单中行数据和div的4个自定义属性,然后js动态赋值的

(0)

相关推荐

  • 最实用的jQuery分页插件

    在做商城和订单管理的时候,常常会用到分页功能,所以我封装了一个jQuery的分页插件,该插件主要实现上下翻页,输入数字跳转等功能. 具体实现如下: 输入参数需要当前页码pageNo,总页码totalPage,回调函数callback. 主要的实现有两个函数,一个是根据当前页和总页数生成相应的html的代码,一个是事件绑定及回调函数的执行. creatHtml函数: creatHtml:function(){ var me=this; var content=""; //当前页码 var

  • jQuery ajax分页插件实例代码

    推荐阅读:jQuery插件开发精品教程让你的jQuery提升一个台阶 既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述.介绍也 比不上代码来得实在.) 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: , preText: "pre", nextText: "next", firstText: &quo

  • 快速掌握jquery分页插件jqPaginator的使用方法

    本文将为大家介绍一款非常赞的jQuery分页插件:jqPaginator. jqPaginator简洁.高度自定义的jQuery分页组件,适用于多种应用场景. 简介 现在网上各种各样的分页组件很多,但是很难找到十分"称心如意"的,于是jqPaginator诞生了. 我心中理想的分页组件,要不受CSS框架限制,可以使用在各种不同风格中的网页中.以我浅显的经验来看,要达到这个目标,关键的一点就是高度自定义的Html结构.所以jqPaginator努力做到合理范围内的自定义,使其灵活的使用了

  • 基于bootstrap3和jquery的分页插件

    自己写的一款基于bootstrap3和jquery的分页插件,初学jquery插件写法,写的很一般.拿出来献丑了. /** * 基于bootstrap3的jquery分页插件 * 调用方式分两种 * 1.直接调用法 * 普通大小 * $.mypage(id,now,max,fn); * 大尺寸 * $.mypagelg(id,now,max,fn); * 小尺寸 * $.mypagesm(id,now,max,fn); * * 参数说明:id为放置分页容器的ID,now为当前页,max为最大页,

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

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

  • asp.net jquery无刷新分页插件(jquery.pagination.js)

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

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

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

  • 分享一个自己动手写的jQuery分页插件

    工作需要一个JS分页插件,心想自己动手写一个吧,一来上网找一个不清楚代码结构的,出了问题难以解决,而且网上的插件所包含的功能太多,有些根本用不到,就没必要加载那段JS,二来想起没写过jQuery插件,就当练一下手了,好了,先看结果: http://demo.jb51.net/js/2014/EasyPage/ 简单说一下这个插件所要实现的功能 后台将查询出来的内容全部显示到页面上,这个插件要控制这些内容,使其一页一页显示.有上一页,下一页,首页,尾页的功能.在第一页时,上一页,首页要隐藏.在最后

  • Jquery 分页插件之Jquery Pagination

    实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性读出来的,效率会差些,插件支持众多参数的自定义配置功能,还是很不错的,大家可以根据自己的想法进行改进. 有同学问道jquery的简单分页插件,原来有同事写过一个简单[Javascript 使用回调函数的自定义分页插件--自带样式

  • 一款Jquery 分页插件的改造方法(服务器端分页)

    分页几乎是每个外部程序必不可少的东西,在webform时代很多人都用过AspNetPager这个用户控件吧,用的人之多其实就在于它的优点:传给它几个参数就可以生成像样的分页,其实这个也是绝大多数程序员(包括我)的致命缺点:样式..,我对于咱们来说用尝试用CSS把一个模块调美观好看所花的时间远远超过了实现功能所需的时间- -! 现在越来越多做web的开始采用.NET MVC框架,抛开一切服务器控件,回归正宗的B/S编程,享受灵活控制好处之余,也得花费很多功夫,很多地方都得自己去实现,例如分页这样的

  • jQuery排序插件tableSorter使用方法

    本文实例为大家分享了jQuery排序插件tableSorter的使用方法,供大家参考,具体内容如下 1.先引两个js <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.tablesorter.min.js"

  • jQuery验证插件validate使用方法详解

    1. 写在前面 我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页

  • jQuery擦除插件eraser使用方法详解

    eraser插件简介: 1.jQuery.eraser 是一个基于 jQuery 的插件,它的效果类似于橡皮擦,按住鼠标不放,在图片上面来回移动,上面灰色的图片就会被擦出,显示出下面彩色的图片. 2.jQuery.eraser 的原理其实是有灰色.彩色两张图片(都需要自己事前准备),将灰色的图片装载于一个 canvas 中,然后和彩色的图片用 CSS 定位在同一个位置,并设置 z-index 使 canvas 位于彩色图片之上.当按住鼠标并在 canvas 上来回移动时,就出现了类似橡皮擦擦出的

  • vue分页插件的使用方法

    本文实例为大家分享了vue分页插件的具体代码,供大家参考,具体内容如下 分页插件代码: <div> <div class="page"> <div class="pagelist"> <span class="jump" :class="{disabled:pstart}" @click="lessPage()">上一页</span> <sp

  • jquery滚动条插件slimScroll使用方法

    本文实例为大家总结了滚动条插件slimScroll的使用方法,供大家参考,具体内容如下 simScroll插件项目下载地址:https://github.com/rochal/jQuery-slimScroll TIP: 1.slimScroll在使用的时候要依赖JQ,所以首次使用的时候要引入JQ再引入simScroll插件 2.不支持resize的时候重新调用插件,不过有人已经修改过源码,这是修改过的版本的下载地址:https://github.com/kujian/jQuery-slimSc

  • jQuery树插件zTree使用方法详解

    最近要做一个树结构,就使用了jQuery 的树插件,感觉还不错,做个随笔 页面的基本结构是这样的 这里的样式是使用了metroStyle文件夹里的类bootstrap风格,当然首先需要下载ztree插件,直接百度即可,下载完成后由对应的api和一些例子,这里使用的是复选框模板 jQuery  zTree树的下载链接 页面jsp如下: <html> <head> <meta http-equiv="content-type" content="te

  • jQuery jcrop插件截图使用方法

    在后台来进行图片切割.头像截取的原理:在前台使用jcrop获取切面的x轴坐标.y轴坐标.切面高度.切面宽度,然后将这四个值传给后台.在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像.即X = X*原图宽/前图宽,Y = Y*原图高/前图高,W = W*原图宽/前图宽,H = H*原图高/前图高.实例:JSP: 复制代码 代码如下: <div id="cutImage" style="display: none;"> <div clas

  • 非常棒的10款jQuery 幻灯片插件

    Easy Slider(在线演示) Horinaja Slide Show Plugin For jQuery(在线演示) Creating Your Own Slider Plugin(在线演示) Slick Accessible Slideshow(在线演示) Sliding Boxes and Captions with jQuery Tutorial(在线演示) Supersized(在线演示) Blog SlideShow(在线演示) EOGallery(在线演示) Smart Gal

  • jQuery ui插件的使用方法代码实例

    复制代码 代码如下: <script src="Jquery1.7.js" type="text/javascript"></script>     <script src="jquery.validate.js" type="text/javascript"></script>     <script src="messages_cn.js" type

随机推荐