社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 一款Jquery 分页插件的改造方法（服务器端分页）_jquery

一款Jquery 分页插件的改造方法（服务器端分页）_jquery

WBOY
发布： 2016-05-16 18:04:55
原创
1555 人浏览过

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

页面代码：

复制代码 代码如下:



显示
@Html.DropDownList("numPerPage", ViewBag.dNumPerPage as SelectList, new { onchange = "PageBreak({numPerPage:this.value})" })
条，共 @Model.TotalCount 条



其实这个完全可以写成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:'
  • #pageNum#
    • '
    };
    return this.each(function(){
    var $this = $(this);
    var pc = new Pagination(opts);
    var interval = pc.getInterval();
    var pageNumFrag = '';
    for (var i=interval.start; ipageNumFrag += 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() }
    });
    })(jQuery);

    分页模板pagination.xml：
    复制代码 代码如下:


    <_ajax_>

    <_page_ id="pagination">
    ]]>


    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提交给后端页面，然后接收返回的数据，加载到指定位置，并且注意给
    相关标签：
    分页插件
    来源：php.cn
    上一篇：Javascript 文本框textarea高度随内容自适应增长收缩_表单特效 下一篇：使用 JScript 创建 .exe 或 .dll 文件的方法_javascript技巧
    本站声明
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    作者最新文章
    最新问题
    页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
    来自于 2024-04-06 21:58:04
    0
    1
    800
    如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
    来自于 2024-04-06 21:28:37
    0
    1
    2257
    Laravel 8 - 如何将 /{editable_text} 路由重定向到 /{user} 路由 我一直在尝试创建重定向路由来引导我访问用户个人资料。重定向路由应该是来自用户数据库的字符串/文本，并且应该重定向到相同的用户个人资料页面。例如，假设我的user1有名为“edita...
    来自于 2024-04-06 17:26:11
    0
    1
    410
    for循环随机从1到0 基本上，每次刷新页面时，for循环都有可能从1变为0。我不知道为什么会发生这种情况，但它影响了我的图像彼此分层的方式。我尝试使用foreach循环，但它仍然给了我相同的结果。这是f...
    来自于 2024-04-06 16:48:14
    0
    1
    393
    部分值条件下的记录查询 - SQL技巧分享 我有一个名为zipcode的表，其中有一个名为code的列。Code列包含邮政编码的前缀，例如395453302120312我想编写一个SQL查询，检查提供的zipcode是否与表...
    来自于 2024-04-06 16:01:26
    0
    1
    395
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    相关教程
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板