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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
js实现筛选功能
Nov 24 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 session应用实例 登录验证
2009/03/16 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
python实现排序算法
2014/02/14 Python
Python标准库与第三方库详解
2014/07/22 Python
Python+django实现文件下载
2016/01/17 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
python针对excel的操作技巧
2018/03/13 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
机械工程师求职自我评价
2013/09/23 职场文书
公司总经理岗位职责
2014/03/15 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
党员进社区活动总结
2015/05/07 职场文书
python前后端自定义分页器
2022/04/13 Python