|  RSS订阅  |  加入收藏

ASP分页应用bootstrap分页组件。

利用bootstrap的分页组件样式,构造一个asp的简单分页函数,从而实现asp站点在移动端的自适应效果。
摘要

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


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

1.jpg

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

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

2.jpg

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

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

3.jpg

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

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

4.jpg

5.jpg

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

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

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

6.jpg

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

7.jpg

8.jpg

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

9.jpg10.jpg

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

11.jpg

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

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

12.jpg

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


如文章有用,点下广告吧
  ASP    bootstrap    
转载请注明出处,未经许可禁止商用!
发表评论
*依据《网络安全法》规定,您需实名认证后才能评论!
@梁兴健:哈哈,我把bootstrap的panel的几个场景根据我内容的关联性分别调用了下。
看着侧边栏的几个panel怎么这么熟悉嘞,原来是bootstrap,嘻嘻,不过现在asp很少人用了
@银色月航:与时俱进不?ASP做后端写自适应的网站,哈哈
这个好,紧跟时代步伐,否则asp是在太老了