ASP分页应用bootstrap分页组件。

鉴于虚拟主机的性能限制,或者为了更好更快的上线网站或者成本原因,有的时候需要使用asp来开发动态站,并且现在移动端的流量普遍大于PC段,又需要体验自适应的效果。所以bootstrap开发的asp站是一个很好的选择。原来一直使用自己的自定义的分页组件,在bootstrap下看起来有些奇怪,所以还是打算彻底把分页按照bootstrap的样式重新写一下。

先来看下最终要实现的分页效果。

首先,我们需要一个构造一个sub过程函数。

例如自定义一个pagecontrol的sub函数:Sub PageControl(pageCount,page),需要传入两个参数:pageCount总页数;page当前页。函数定义完成后,先行处理url原本的参数。这里直接贴代码,大意就是获取当前url的参数进行非page参数的筛选,不详细说了。

其次,嵌入bootstrap分页组件的ul部分。

bootstrap分页组件中的页码都是li标签,外面还有个nav和ul标签需要处理下(闭合标签就不贴了)。代码:

第三,处理上一页和下一页的页码。

这里就需要用到我们传入当前页(page)这个参数,上一页就是page-1,下一页就是page+1。有两种特殊情况,当前页为第一页时,page-1无效。当前页为最后一页时,page+1无效。通过bootstrap定义的disabled禁用状态处理这两个特殊状态。

第四,处理页码主体部分。

我们将页码主体分成两种情况,一是总页数在10页以内的,全显页码。二是总页数在10页以上的显示部分页码和缩略符。简单的一个if判断,不贴了。

10页以内全显示很简单(pageCount<=10)。如图:

处理大于10页的页码,又分三种情况,当前页靠前,只在后面出现缩略符;当前页靠后,只在前面出现缩略符;当前页在中间部分,两头出现缩略符。但无论何种情况,开头两页和结尾两页要始终显示的。所以先把开始两页和结尾两页显示出来,如图:

接着处理当前页码靠前,后面出现缩略符和当前页码靠后,前面出现缩略符的情况。直接贴图了。

最后就是中间最常见的情况了,当前页码在中间位置,前后各有缩略符的情况。如图。

第五,页面上调用Sub函数。

call一下就行了,传两个参数。其中当前页参数,记得给个默认值,url上没有页码参数,当前页就为1。

好了,一个完整的分页过程函数就这样了。按照以上思路,拼合起来就行了。如需完整源码,点此下载

打赏

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Objective-C

Swift-MVVM 简单演练(一)

4734
来自专栏学海无涯

Java Web之Servlet获取表单值

Java Web开发中,最常用的就是在后台获取前台的参数,经典的案例就是 JSP 表单传值到后台的 Servlet,然后在 doGet 或者 doPost 中获...

3424
来自专栏葡萄城控件技术团队

扩展GridView控件——为内容项添加拖放及分组功能

引言 相信大家对GridView都不陌生,是非常有用的控件,用于平铺有序的显示多个内容项。打开任何WinRT应用或者是微软合作商的网站,都会在APP中发现Gri...

3485
来自专栏抠抠空间

Django内置的分页模块

自定义分页 未封装版: 优点:直观 缺点:代码乱,不易维护,可拓展性差 data = [] for i in range(1, 302): tmp =...

3218
来自专栏逸鹏说道

模块式开发

这两天看到同事的一个小工具,用的是模块式开发,也就是俗称的插件开发,用的是反射+接口的方式实现的。感觉挺好的,也就学习了一下,写个小Demo,在此记录下。 一、...

3396
来自专栏肖蕾的博客

第一章:Hello Libgdx

https://gitee.com/xcode_xiao/LibGdxDemos2/tree/master/HelloGDX

921
来自专栏Python小屋

Python回文判断代码优化与6个思考题

送个福利:清华大学出版社和新宝图书专营店联合推出正版特价图书《Python程序设计开发宝典》,原价69元,特价47.6元,详情:https://detail.t...

3536
来自专栏Java3y

Lock锁子类了解一下

1447
来自专栏一个爱瞎折腾的程序猿

winform制作小工具的技巧

在使用winfrom制作一些工具的时候,一些基本设置都是去属性里面找来找去,一段时间就忘了,记录记录以备不时之需。

2123
来自专栏iOSer成长记录

iOS-UIPageViewController实现分页控件

1353

扫码关注云+社区

领取腾讯云代金券