前端漂亮分页代码
2016-12-14 16:55
253 查看
为方便查找,将本次分页记录下来。效果如下:
<div class="pagin"> <div class="message">共<i class="blue"><asp:Label ID="lbtotal" runat="server" Text="0"></asp:Label></i>条记录,当前显示第 <i class="blue"><asp:Label ID="lbpage" runat="server" Text="1"></asp:Label> </i>页</div> <ul class="paginList"> <%int CurPage = Convert.ToInt32(lbpage.Text); int totalpage = (Convert.ToInt32(lbtotal.Text) / Convert.ToInt32(hfpagesize.Value)); if ((Convert.ToInt32(lbtotal.Text) % Convert.ToInt32(hfpagesize.Value)) != 0) totalpage = totalpage + 1; if (CurPage >= 1) { if (CurPage == 1) { CurPage = 1; } else {%> <li class="paginItem"><a href='XX.aspx?P=<%=(CurPage - 1)%>&TS=<%=txtstart.Text%>&TE=<%=txtend.Text%>'><span class="pagepre"></span></a></li><%} } int startpage = 1; int endpage = totalpage; if (totalpage <= 5) { startpage = 1; endpage = totalpage; for (int i = startpage; i <= endpage; i++) { if (i == Convert.ToInt32(lbpage.Text)) { %> <li class="paginItem current"><a href="XX.aspx?P=<%=(CurPage - 1)%>&TS=<%=txtstart.Text%>&TE=<%=txtend.Text%>"><%=i%></a></li><%} else { %> <li class="paginItem"><a href="XX.aspx?P=<%=(CurPage - 1)%>&TS=<%=txtstart.Text%>&TE=<%=txtend.Text%>"><%=i%></a></li><%} } } else { if (CurPage <= 3) { startpage = 1; endpage = 5; } else { startpage = CurPage - 2; endpage = CurPage + 2 < totalpage ? CurPage + 2 : totalpage; } for (int j =startpage; j <= endpage; j++) { if (j == CurPage) { %> <li class="paginItem current"><a href="XX.aspx?P=<%=(CurPage - 1)%>&TS=<%=txtstart.Text%>&TE=<%=txtend.Text%>"><%=j%></a></li><%} else { %> <li class="paginItem"><a href="XX.aspx?P=<%=(CurPage - 1)%>&TS=<%=txtstart.Text%>&TE=<%=txtend.Text%>"><%=j%></a></li><%} if (j == endpage&&endpage<totalpage) { startpage = j + 1; %> <li class="paginItem more"><a href="XX.aspx?P=<%=(CurPage - 1)%>&TS=<%=txtstart.Text%>&TE=<%=txtend.Text%>">...</a></li><%} } %> <%if (CurPage <= totalpage) { if (CurPage == totalpage) {CurPage = totalpage;}else{%> <li class="paginItem"><a href="XX.aspx?P=<%=(CurPage - 1)%>&TS=<%=txtstart.Text%>&TE=<%=txtend.Text%>"><span class="pagenxt"></span></a></li><%}} }%> </ul> </div>
相关文章推荐
- Buffer cache 的调整与优化(一)
- HTML总结笔记
- js基础:函数表达式和函数声明
- js 定时刷新
- 小兔JS教程(三)-- 彻底攻略JS回调函数
- 使用Bootstrap Paginator分页插件进行分页
- three.js添加文字
- JSON.stringify()与JSON.parse()
- 《JavaScript高级程序设计》读书笔记--5-引用类型
- Koa 请求日志打点工具
- django之一些feature
- js中getBoundingClientRect的作用及兼容方案
- HTML多图预览上传
- FlexSlider jQuery滑动切换插件 参数
- 基于Maven构建SSM+Druid+Bootstrap(AdminLTE)项目--简单示例
- js动态添加文件上传框
- js运算符的优先级
- 关于在html中通过js解析xml相关问题:
- js控制tr显示和隐藏
- 【 地图系列 】 世界地图和主要国家的 JSON 文件