Bootstrap实现翻页效果


Posted in Javascript onNovember 27, 2017

Bootstrap之翻页。

优点:

支持局部刷新;
只要是列表,都可以加载该组件;
支持动态数据绑定;
当然还有绝对的简单实用。

效果图

最后一页时:

Bootstrap实现翻页效果

最开始一页时:

Bootstrap实现翻页效果

实现

①、翻页组件的布局

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>


<c:if test="${urlParas == null}">
 <c:set var="urlParas" value="" />
</c:if>
<c:if test="${(totalPage > 0) && (currentPage <= totalPage)}">
 <c:set var="startPage" value="${currentPage - 4}" />
 <c:if test="${startPage < 1}">
 <c:set var="startPage" value="1" />
 </c:if>
 <c:set var="endPage" value="${currentPage + 4}" />
 <c:if test="${endPage > totalPage}">
 <c:set var="endPage" value="totalPage" />
 </c:if>

 <nav>
 <ul class="pager">
  <c:if test="${currentPage <= 8}">
  <c:set var="startPage" value="1" />
  </c:if>

  <c:if test="${(totalPage - currentPage) < 8}">
  <c:set var="endPage" value="${totalPage}" />
  </c:if>

  <c:choose>
  <c:when test="${currentPage == 1}">
   <li class="previous disabled"><a>
    <span aria-hidden="true">←</span>
    前一页
   </a></li>
  </c:when>
  <c:otherwise>
   <li class="previous"><a href="javascript:;" pageNum="${currentPage - 1}" rel="${rel}" urlParas="${urlParas}">
    <span aria-hidden="true">←</span>
    前一页
   </a></li>
  </c:otherwise>
  </c:choose>

  <c:choose>
  <c:when test="${currentPage == totalPage}">
   <li class="next disabled"><a>
    后一页
    <span aria-hidden="true">→</span>
   </a></li>
  </c:when>
  <c:otherwise>
   <li class="next"><a href="javascript:;" pageNum="${currentPage + 1}" rel="${rel}" urlParas="${urlParas}">
    后一页
    <span aria-hidden="true">→</span>
   </a></li>
  </c:otherwise>
  </c:choose>

 </ul>
 </nav>
</c:if>
  • pageNum:第几页
  • rel:要刷新哪一个div的id
  • urlParas:其他参数

②、调用翻页组件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>

<c:set var="currentPage" value="${dealPage.pageNumber}" />
<c:set var="totalPage" value="${dealPage.totalPage}" />
<c:set var="rel" value="deal_items" />
<c:set var="urlParas" value="" />

<%@ include file="/components/common/paginate.jsp"%>
  • currentPage:页数
  • totalPage:总页数
  • rel:局部刷新div的id
  • urlParas:其他参数,暂无

③、翻页事件

$(function() {
// 翻页组件
 $("ul[class=pager] li:not(.disabled) > a", $p).each(function() {
 $(this).click(function(event) {
  var $this = $(this);
  YUNM.debug($this.attr("pageNum") + "、" + $this.attr("rel") + "、" + $this.attr("urlParas"));

  var pageNum = $this.attr("pageNum");
  // 准备翻页事件
  if (pageNum && pageNum.isPositiveInteger()) {
  yunmPageBreak({
   rel : $this.attr("rel"),
   data : {
   pageNum : pageNum,
   urlParas : $this.attr("urlParas")
   }
  });
  }

  event.preventDefault();
  return false;
 });
 });
});
  • 页面加载完成后,获取翻页的a标签,为其加载翻页功能。
  • 设置pageNum,这个肯定必须传递
  • 获取局部刷新div,这个地方以后有待改善,通过id获取好像不太好。
  • 传递额外参数urlParas
  • 最后阻止a标签既有事件。
/**
 * 翻页
 * 
 * @param options
 */
function yunmPageBreak(options) {
 var op = $.extend({
 rel : "",
 data : {
  pageNum : "",
  numPerPage : "",
  orderField : "",
  orderDirection : "",
  urlParas : ""
 },
 callback : null
 }, options);

 var $panel = $("#" + op.rel);
 if (op.rel) {
 var dataId = $panel.attr("data");

 var url = $panel.attr("url");

 // 设置div上的其他参数
 if (dataId) {
  if (dataId.indexOf(",") != -1) {
  $.each(dataId.split(","), function(index, id) {
   if ($("#" + id) && $("#" + id).val()) {

   url = addMoreParamForUrl(url, id, $("#" + id).val());
   }
  });
  } else {
  if ($("#" + dataId) && $("#" + dataId).val()) {
   url = addMoreParamForUrl(url, dataId, $("#" + dataId).val());
  }
  }
 }

 // 局部刷新
 $panel.ajaxUrl({
  type : "POST",
  url : url,
  data : op.data,
  callback : function(response) {
  if ($.isFunction(op.callback))
   op.callback(response);
  }
 });
 }
}
  • 这串代码也很好懂,获取ajax请求的url
  • 获取ajax请求的参数data
  • 至于ajaxUrl方法,请参照我的再谈ajax局部刷新,我觉得这样局部刷新还是很实用的。

到这,前台的内容都OK了,接下来需要什么呢?自然是jfinal端的数据获取。

④、分页数据获取

public Page<Deals> paginateCreateDealsByUid(int pageNumber, int pageSize, Long uid) {

 Page<Deals> deals = paginate(pageNumber, pageSize, "select y.*",
  "from ym_dels y where y.uid = ? order by y.opertime desc", uid);

 return deals;
}
  • jfinal自然已经提供了很好的翻页功能paginate方法。
  • 就只需要把对应的数据返回就可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 学习之一 对象访问
Nov 23 Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 #jQuery
JS使用贪心算法解决找零问题示例
Nov 27 #Javascript
Vue.js实现分页查询功能
Nov 15 #Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 #Javascript
JS基于贪心算法解决背包问题示例
Nov 27 #Javascript
基于vue.js的分页插件详解
Nov 27 #Javascript
webpack构建换肤功能的思路详解
Nov 27 #Javascript
You might like
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
php加密解密字符串示例
2016/10/13 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
haskell实现多线程服务器实例代码
2013/11/26 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python 自动化表单提交实例代码
2017/06/08 Python
python unittest实现api自动化测试
2018/04/04 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
教师节领导致辞
2015/07/29 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书