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实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
JS制作简易计算器的实例代码
Jul 04 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python得到电脑的开机时间方法
2018/10/15 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python grpc超时机制代码示例
2020/09/14 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
经济贸易专业自荐信
2014/06/11 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
热血教师观后感
2015/06/10 职场文书
欢迎新生标语2015
2015/07/16 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS
SpringBoot Http远程调用的方法
2022/08/14 Java/Android