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 相关文章推荐
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
原生js实现选项卡功能
Mar 08 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
vue回到顶部监听滚动事件详解
Aug 02 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 表单数据的获取代码
2009/03/10 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
javascript中的几个运算符
2007/06/29 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
如何客观的进行自我评价
2013/12/17 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
股份合作协议书
2014/09/10 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
Nginx配置https的实现
2021/11/27 Servers