Fit项目分页组件的编写

项目中涉及列表显示的地方都会用到分页控件,为了能更好地与当前网站的样式匹配,这次要自己实现一个。

所以选择了模板中提供的分页样式,基于模板改造以能够动态生成:

http://images2015.cnblogs.com/blog/844205/201706/844205-20170606225606043-2137817722.png" >

http://images2015.cnblogs.com/blog/844205/201706/844205-20170606225609887-709741290.png" >

一 控件的行为规则
a) 可设置显示几个页码(默认5个,只能是奇数)

如果当前页显示5个,则默认前后各有两个,比如当前页是5,显示页码为“3 4 5 6 7

如果当前页在最前面,比如为1,显示页码为:1 2 3 4 5

同样当前页在最后面,比如为9,显示页码为:5 6 7 8 9

如果总页数少于5,比如只有3页,则页码全部显示:1 2 3

b) 关于跳转首页(<<)、尾页(>>)、上一页(<)、下一页(>)

如果当前页是第一页,首页和上一页禁用

如果当前页是最后一页,尾页和下一页禁用

c) 当前页的样式要区别于其它页码

二 代码编写

a) 分页组件类、属性、常量

PAGE_COUNT为默认显示的页码数量,这里为了便于测试设置成了2;静态属性分别为当前页、总页数、数据总条数,但刚刚发现TotalPage、TotalCount实际上是冗余的,两者可以互相计算得出,这要尽早重构。

b) 局部变量

根据目前的实现,需要这么一坨局部变量。startPage、endPage限定了显示页码的范围。将跳转链接放在了hrefStr,以后其它列表需要使用这个工具类时,可把hrefStr改造成属性。最后的以Attr和Href结尾的变量用于设置4个跳转按钮的禁用属性和超链接。

c) 核心方法

核心的方法如下,主要实现“一 控件的行为规则”中a) 所描述的规则。

http://images2015.cnblogs.com/blog/844205/201706/844205-20170606225749887-1529658259.png" >

d) 设置属性与Href的方法,实现了“一 控件的行为规则”中b) 所描述的规则,需要注意的坑是,标签需要禁用时,为其加上”disabled”=”true”是不管用的,这样做只是在样式上起作用。所以这儿采用的方法是通过设置href=”#”来阻止跳转(但会回到页面顶部),鼠标以上去的红圈样式使用Inspinia模板的class=”disabled”样式,这便是设置firstPageAttr等标签为”disabled”的用途


e) 返回html的方法

f) 分页组件的使用

在前端页面中,使用razor语法,Html元素的输出要用@Html.Raw()方法,另外因为相关的变量都是静态的,每次使用完要记得调用Reset重置状态。
这样自己的分页组件就实现了,原本就知道这个小小的控件不好写,经过很多次单元测试、集成测试,费了不少时间终于能够使用了。

著作权归作者所有

文章转载自 开源中国社区 [http://www.oschina.net]

时间: 2024-07-28 14:55:05

Fit项目分页组件的编写的相关文章

原生js怎么编写基于面向对象的分页组件

    本文实例为大家分享了一个基于面向对象的分页组件的具体实现代码,供大家参考,具体内容如下     文字表达有限,直接上代码了 一个基于面向对象的分页组件undefined'){    this.eventHandlers[eventType]= [];    }    this.eventHandlers[eventType].push(eventHandler);   },   /*触发自定义事件*/   fire: function(eventType){    if( this.ev

原生js编写基于面向对象的分页组件_javascript技巧

本文实例为大家分享了一个基于面向对象的分页组件的具体实现代码,供大家参考,具体内容如下 文字表达有限,直接上代码了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一个基于面向对象的分页组件</title> <style> html,body{padding:0;margin:0;} p{padding:0;margin:0;} a

JQuery 常用积累(二)Pagination 分页组件

阅读目录 1.JSP页面 2.JS 控制 3.后台java类进行处理的两个公共方法 官方Demo网址:http://mricle.com/JqueryPagination      分页组件几乎是一般网站都会涉及到的组件,网上有很多这样的插件,自己挑来跳去选择了这一款,功能强大,可扩展性比较强,而且幕后的工程师一直在完善这个插件,不废话了,上干货. (模拟场景:商店网站,俺要根据用户选择的查询条件,来查询数据库,并展示到前台) 回到顶部 1.JSP页面 如果你的web项目前台是基于bootstr

基于Vue.js的表格分页组件_javascript技巧

一.Vue.js简介1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化(1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-mo

asp.net mvc4 mysql制作简单分页组件(部分视图)_实用技巧

在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstrap分页组件,这可以参考http://v3.bootcss.com/components/. 先将生成项目效果截图呈上: 这里有需要预先知道的,是mysql分页查询与mssql分页查询实现不同点在于,mysql支持limit语句,limit格式为 limit pageIndex*pageSize,p

ASP.NET分页组件学与用——教学篇

asp.net|分页 ASP.NET分页组件学与用--教学篇 没有人会怀疑分页组件在WEB应用程序中的作用.数据库中的记录数成千上万甚至过亿,如果一股脑儿显示在一页显然毫不现实,这样的程序员也太小儿科了.所以,最好的办法就是分页显示,每页只显示数据库中的一部分记录,可以翻页,也可以输入一个页码翻到指定的页面,这种方式也是当前比较常见的用法. 本文的不同之处在于,我把分页的功能封装在组件中,一方面体现了面向对象的特点,另一方面也方便发布.共享和使用.事先声明,本文不再讲述组件创建的详细过程,如果有

ASP.NET分页组件学与用——使用篇

asp.net|分页 ASP.NET分页组件学与用--使用篇 大家好,这篇文章承启上一篇文章<ASP.NET分页组件学与用--教学篇>. 在<ASP.NET分页组件学与用--教学篇>中,我们讲解了分页组件的整个创建过程,那么在这一篇文章中,我们主要讨论一下如何使用该组件. 请按以下步骤操作: 1. 创建一个WEB应用程序工程. 2. 将上篇文章中生成的组件添加到工具箱中.如果您不知道添加的过程,请参考文章<ASP.NET组件编程step by step> 3. 在默认的

分享一个自己写的简单的javascript分页组件

 这篇文章主要分享一个自己写的简单的javascript分页组件,效果十分不错,代码也很详尽,这里推荐给小伙伴们.     自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id. html结构如下:   代码如下: <ul class="pagination" id="pageDIV"> </ul> class="pagination" 给定了分页的样式,

VUE实现一个分页组件

分页是WEB开发中很常用的功能,尤其是在各种前后端分离的今天,后端API返回数据,前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了.从最开始的jquery时代到现在的各种各样的前端框架时代,分页功能都是必不可少的. 分页大多数(基本上)情况下都是对异步数据列表的处理,这里首先需要明白一下分页的流程. 在已知每页显示数据量pageSize以及当前页码pageIndex的情况下: 请求API,返回第一屏数据(pageSize内)以及所有