前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ASP分页应用bootstrap分页组件。

ASP分页应用bootstrap分页组件。

作者头像
世纪访客
发布2018-08-02 15:38:16
3.3K0
发布2018-08-02 15:38:16
举报
文章被收录于专栏:西枫里博客西枫里博客
...
...

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

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

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

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

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

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

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

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

4.jpg
4.jpg
5.jpg
5.jpg
第四,处理页码主体部分。

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

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

6.jpg
6.jpg

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

7.jpg
7.jpg
8.jpg
8.jpg

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

9.jpg
9.jpg
10.jpg
10.jpg

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

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

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

12.jpg
12.jpg

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

打赏

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-03-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 首先,我们需要一个构造一个sub过程函数。
  • 其次,嵌入bootstrap分页组件的ul部分。
  • 第三,处理上一页和下一页的页码。
  • 第四,处理页码主体部分。
  • 第五,页面上调用Sub函数。
相关产品与服务
轻量应用服务器
轻量应用服务器(TencentCloud Lighthouse)是新一代开箱即用、面向轻量应用场景的云服务器产品,助力中小企业和开发者便捷高效的在云端构建网站、Web应用、小程序/小游戏、游戏服、电商应用、云盘/图床和开发测试环境,相比普通云服务器更加简单易用且更贴近应用,以套餐形式整体售卖云资源并提供高带宽流量包,将热门开源软件打包实现一键构建应用,提供极简上云体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档