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 Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
使用JavaScript破解web
2018/09/28 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
python学习之面向对象【入门初级篇】
2017/01/21 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python的继承知识点总结
2018/12/10 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
《走一步再走一步》教学反思
2014/02/15 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
篮球社团活动总结
2014/06/27 职场文书
个人剖析材料范文
2014/09/30 职场文书
2014年党员整改措施
2014/10/24 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
储备店长岗位职责
2015/04/14 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技