【自然框架】js版的QuickPager分页控件 V2.0

优点:

1、  通过更换模板可以控制各个分页元素(比如首页、末页,页号导航等)的位置和是否显示。

2、  通过更换css可以实现各种UI风格和效果。(附带24套css效果)

3、  Js的方式创建分页UI,不占用服务器资源。

4、  可以通过插件的方式更换各部分js代码。如果自带的js代码不能满足您的需求,那么您自己写的插件实现需要的效果。

5、  Ajax的方式获取记录集,减轻网络负担。

6、  多种调用方式,让“偷懒”和灵活共存。

缺点:

1、  不支持SEO。因为用js和ajax,所以不支持搜索引擎的收录。

2、  不支持服务器端控件,比如GridView。

内容介绍:

1、  模板

  设置一个htm页面,存放分页用的模板,这样只要保证及格ID不变,其他的都可以随意编排,想怎么编排就怎么编排,限制降到最低。模板如下: 

<div id="PageTurn" class="pager" >
    <span >共<font id="P_RecordCount" style="color:Red;"></font>条记录</span>
    <span >第<font id="P_Index" style="color:Red;"></font>/<font id="P_PageCount" style="color:Red;"></font>页</span>
    <span >每页<font id="P_PageSize" style="color:Red;"></font>条记录</span>
    <span id="S_First" class="disabled" >首页</span>
    <span id="S_Prev"  class="disabled" >上一页</span>
    <span id="S_navi"><!--页号导航--></span>
    <span id="S_Next"  class="disabled" >下一页</span>
    <span id="S_Last"  class="disabled" >末页</span>
    <input id="Txt_GO" class="cssTxt" name="Txt_GO" type="text" size="1"  /> 
    <span id="P_GO" >GO</span>
</div>

2、  Css

  用css来控制UI样式。这样更换css文件就可以实现更换风格。前一阵子有园友分享了24套样式,借鉴了一下。在这里大家一起感谢园友的分享。 

div.pager {
    text-align: center; padding-bottom: 10px; background-color: #000; margin: 3px; padding-left: 3px; padding-right: 3px; color: #a0a0a0; font-size: 80%; padding-top: 10px
}
div.pager a {
    background-image: url(bar.gif); border-bottom: #909090 1px solid; border-left: #909090 1px solid; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; background-position: 50% bottom; color: #c0c0c0; border-top: #909090 1px solid; margin-right: 3px; border-right: #909090 1px solid; text-decoration: none; padding-top: 2px
}
div.pager a:hover {
    background-image: url(invbar.gif); border-bottom: #f0f0f0 1px solid; border-left: #f0f0f0 1px solid; background-color: #404040; color: #ffffff; border-top: #f0f0f0 1px solid; border-right: #f0f0f0 1px solid
}
div.pager a:active {
    background-image: url(invbar.gif); border-bottom: #f0f0f0 1px solid; border-left: #f0f0f0 1px solid; background-color: #404040; color: #ffffff; border-top: #f0f0f0 1px solid; border-right: #f0f0f0 1px solid
}
div.pager span.current {
    border-bottom: #ffffff 1px solid; border-left: #ffffff 1px solid; padding-bottom: 2px; background-color: #606060; padding-left: 5px; padding-right: 5px; color: #ffffff; border-top: #ffffff 1px solid; font-weight: bold; margin-right: 3px; border-right: #ffffff 1px solid; padding-top: 2px
}
div.pager span.disabled {
    border-bottom: #606060 1px solid; border-left: #606060 1px solid; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; color: #808080; border-top: #606060 1px solid; margin-right: 3px; border-right: #606060 1px solid; padding-top: 2px
}
 

3、  Js脚本

  分为三个部分,默认值、主体和扩展。

  默认值就不用多说了,要想让分页能够顺利跑起来需要设置很多属性,但是过多的属性设置就很烦了,于是就有了“默认值”。常用的属性值作为默认属性,这样在调用的时候就不用重复设置一大堆的属性了。

Nature.Page.QuickPagerDefaultInfo = { 
    recordCount: -1,        //总记录数
    pageSize: 10,           //一页记录数
    pageCount: -1,          //总页数,不用设置,根据上两个条件自动计算
    thisPageIndex: 1,       //当前页号
    beforePageIndex: 1,     //上一次的页号
    //lastPageIndex: 0,     //最后一页的页号,自动计算

    naviCount:7,            //页号导航的数量
    isUseRecordCount: true,   //是否使用缓存的总记录数

    pageTurnDivIDs: "",           //放置分页控件的div的id,可以是多个,用半角逗号分隔
    
    //分页控件模板的路径和文件名
    templetPath:"/aspnet_client/QuickPager/PageTurn2.htm",  
    //分页控件css文件的路径和文件名
    cssPath: "/aspnet_client/QuickPager/skin/default/pager.css",
     
    OnPageChange: function () { },  //翻页的事件
    NaviCreate: function () { },    //创建页号导航
    SetPageUI: function () { },    //设置分页UI
    RegPagerEvent: function () { }    //注册分页UI的事件,不包括页号导航的事件
    
    
};

  主体,这个主体有一点MVC里的C的感觉——总体上的控制:加载模板、设置UI、创建页号导航、注册翻页事件等等。他本身并不实现具体的功能,而是把这些功能组合起来。

//js版的QuickPager
Nature.Page.QuickPager = function () {
    this.pagerInfo = {};
    this.Start = function (callback) {
        //设置默认值
        setDefaultInfo(this.pagerInfo);
        var info = this.pagerInfo;

        //设置css。如果没有设置,则不动态加载
        if (info.cssPath != undefined)
            Nature.CommonFunction.addStyle(info.cssPath);

        //加载模板
        $.get(info.templetPath, function (data) {
            //alert("加载分页模板成功");

            //模板放到div里面
            var tmpdiv = info.pageTurnDivIDs.split(",");
            $("#" + tmpdiv[0]).html(data);

            if (info.recordCount != -1) info.SetPageUI(info); //设置分页UI

            info.RegPagerEvent(info); //注册事件(仅限上一页、下一页、首页、末页,不包括页号导航)
            info.NaviCreate(info); //设置页号导航

            //调用外部函数,提取记录创建table
            info.OnPageChange(0, 1);

            if (callback != undefined)
                callback(); //回调

            //克隆多个分页UI
            if (tmpdiv.length > 1) {
                window.setTimeout(function () {
                    var pageHtml = $("#" + tmpdiv[0]).clone(true);
                    for (var i = 1; i < tmpdiv.length; i++) {
                        $("#" + tmpdiv[i]).html(pageHtml);
                    }
                }, 100);
            }

        });
    };

    //设置默认值
    var setDefaultInfo = function (a) {
        var b = Nature.Page.QuickPagerDefaultInfo;
        if (a.recordCount == undefined) a.recordCount = b.recordCount;
        if (a.pageSize == undefined) a.pageSize = b.pageSize;
        if (a.pageCount == undefined) a.pageCount = b.pageCount;
        if (a.thisPageIndex == undefined) a.thisPageIndex = b.thisPageIndex;
        if (a.beforePageIndex == undefined) a.beforePageIndex = b.beforePageIndex;
        if (a.isUseRecordCount == undefined) a.isUseRecordCount = b.isUseRecordCount;
        if (a.naviCount == undefined) a.naviCount = b.naviCount;

        if (a.templetPath == undefined) a.templetPath = b.templetPath;

        if (a.NaviCreate == undefined) a.NaviCreate = Nature.Page.QuickPagerExtend.CreateNavi;
        if (a.SetPageUI == undefined) a.SetPageUI = Nature.Page.QuickPagerExtend.SetPageUI;
        if (a.RegPagerEvent == undefined) a.RegPagerEvent = Nature.Page.QuickPagerExtend.RegPagerEvent;

    };
}; 

  扩展,每一个功能都作为了一个扩展插件的形式,比如创建页号导航。页号导航有很多总形式,一中形式肯定不能满足所有人的需求,那么怎么办呢?把每种形式都罗列出来吗?这样整个分页代码就会比较臃肿。所以就想到了这种扩张的形式。在主体外面实现页号导航的功能,在主体里调用。如果自带的不能满足,那么可以把自己写一个替换掉自带的。而总体结构不会发生变化。达到了“对扩展开放,对修改关闭”。

使用方法:

1、  设置“属性”。

  虽然属性有很多,但是最低只需要设置两个属性——总记录数和存放分页控件的容器ID。

  不设置总记录数,就不知道有多少页,页号导航就做不出来,UI也没法控制。而总记录数又没法设置默认值。

  存放分页控件的容器ID,简单的说就是DIV的ID,当然也可以放在td里面,只要设置好ID就行。如果要实现上下两个分页UI,那么只需要把这两个ID用半角逗号分割,设置上就行。

2、  设置事件。

  翻页的时候触发的事件。Js的事件处理真的是太简单了,就跟属性一样。弄个function就可以了。

  翻页的时候触发OnPageChange ,传递过来两个参数,一个是翻页前的页号(oldPageIndex),一个是要翻到哪一页( thisPageIndex)。

3、  开始呈现。

  属性和事件设置好了之后就可以呈现了。调一个函数就可以,内部会自动调用OnPageChange(0,1)来呈现第一页的数据。如果呈现之后还要做点什么的话,可以加一个回调函数。

 window.onload = function () {

        var page = new Nature.Page.QuickPager();

        //设置相关属性
        page.pagerInfo = {
            recordCount: 102,       //总记录数
            //pageSize: 10,           //一页记录数
            pageTurnDivIDs: "divQuickPage1",         //放置分页控件的div的id,可以是多个,用半角逗号分隔

            //翻页的事件
            OnPageChange: function (oldPageIndex, thisPageIndex) {
                alert("翻页前页号:" + oldPageIndex);
                alert("翻页后页号:" + thisPageIndex);

                //可以自行获取记录,创建table
            }
        };

        //开始
        page.Start(function () {
            //内部自动调用OnPageChange(0,1)。
        });

    };

在线演示:

http://www.naturefw.com/test/quickpager/PageTurn01.htm

可以更换模板,可以更换css

鸣谢!

  感谢群里的兄弟们帮忙做测试,发现了几个小bug和没注意到的地方。

  如果大家也挺感兴趣的话,欢迎加群:82598514

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT笔记

SpringMvc+Velocity的一些配置总结

前言 公司用了许久的struts2+hibernate,前两年时间SpringMvic+Shiro也有做过,大多都是基于JSP实现的界面展示层,最近一段使用使用...

37770
来自专栏林德熙的博客

win10 uwp 如何创建修改保存位图 创建保存图片在 Image 控件使用WriteableBitmap 转换通过读写像素转换 CanvasBitmap

在 UWP 使用底层的图像渲染就是使用 Softwarebitmap ,这个类提供直接数据修改,可以使用这个类进行软渲染。实际上 Softwarebitmap ...

44310
来自专栏从零开始学自动化测试

Selenium2+python自动化24-js处理富文本

前言 上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,...

30550
来自专栏macOS 开发学习

Mac OSX 开发基础控件学习之 NSOutlineView

在开发基于osx的Application的过程中,当我们需要显示一组列表结构的数据时,比较容易想到的控件是NSTableView;但如果你显示的数据有层级结构...

24920
来自专栏DannyHoo的专栏

底牌项目中上传牌谱功能之编辑标准模式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/de...

13330
来自专栏西枫里博客

Bootstrap弹出框中插入图片

一时心血来潮,给博客增加一个打赏功能,看了下大家的打赏按钮,主要分两种,一种是两端是赞和分享中间是打赏的按钮形式,另外一种是孤单的一个打赏按钮。原本想用第一种的...

24210
来自专栏每日一篇技术文章

go - os包 彻头彻尾用法使用

os包提供了操作系统函数的不依赖平台的接口。设计为Unix风格的,虽然错误处理是go风格的;失败的调用会返回错误值而非错误码。通常错误值里包含更多信息。例如,如...

32160
来自专栏React Native开发圈

React Native面试知识点

本文会不定期不断更新,想查看最新版本请移步至https://github.com/forrest23/react-native-interview

31910
来自专栏向治洪

微信小程序实例之摇一摇抽奖

概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目...

65460
来自专栏小狼的世界

CHROME对CSS的解析

最近完成的一个项目需要做对Chrome的支持,在这个过程中发现了一个Chrome对于Css解析与FF、IE等的区别,在这里总结一下。

10720

扫码关注云+社区

领取腾讯云代金券