Bootstrap和Java分页实例第二篇


Posted in Javascript onDecember 23, 2016

关于此文

运用第一篇分页的例子,结果以失败告终。在网上又寻找了很多例子。大多是都是这一种。着手开发的项目采用spring MVC框架。符合需求。摘下来,试了一试。

      网上的例子总是少一些东西。经过一番折腾。终于搞定了。下面分享出来,供参考。

      分页基本逻辑思想懂了,重点是在于怎么实现。怎么实现更好。还需要进一步思考。

配置xml-pager.tld

<?xml version="1.0" encoding="UTF-8" ?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/j2eehttp://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
 version="2.0">
 <description>Pager</description>
 <tlib-version>1.0</tlib-version>
 <short-name>page</short-name>
 <uri></uri>
 <tag>
  <name>createPager</name>
  <tag-class>getui.util.Pager</tag-class>
  <body-content>JSP</body-content>
  <attribute>
   <name>curPage</name>
   <required>true</required>
   <rtexprvalue>true</rtexprvalue>
   <type>java.lang.Integer</type>
  </attribute>
  <attribute>
   <name>totalPage</name>
   <required>true</required>
   <rtexprvalue>true</rtexprvalue>
   <type>java.lang.Integer</type>
  </attribute>
  <attribute>
   <name>pageSize</name>
   <required>true</required>
   <rtexprvalue>true</rtexprvalue>
   <type>java.lang.Integer</type>
  </attribute>
  <attribute>
   <name>totalCount</name>
   <required>true</required>
   <rtexprvalue>true</rtexprvalue>
   <type>java.lang.Integer</type>
  </attribute>
  <attribute>
   <name>formId</name>
   <required>true</required>
   <rtexprvalue>true</rtexprvalue>
   <type>java.lang.String</type>
  </attribute>
 </tag>
</taglib>

分页控件-Pager

package getui.util;
import java.io.IOException;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;

/***
 * 分页控件
 * 
 * @author Anny
 */
public class Pager extends TagSupport {

  private Integer curPage;   //当前页码
  private Integer totalPage;  //总页数
  private Integer pageSize = 10; //一页显示的记录数
  private Integer totalCount = 0; //记录总数
  private String formId;   //请求的action name
  private Integer lastIndex;  //结束索引

  public int doStartTag() throws JspException {
  StringBuffer buffer=new StringBuffer();
  JspWriter out = pageContext.getOut();

  int pageNumber = 0;
  if (totalPage % pageSize == 0) {
   pageNumber = totalPage / pageSize;
  } else {
   pageNumber = (totalPage / pageSize) + 1;
  }
  if (curPage < 1) {
   curPage = 1;
  }

  try {
   if (pageNumber > 0) {
   buffer.append("<script type='text/javascript'>");//script-Start
   buffer.append("function go(pageNum)");
   buffer.append("{");//{start
   buffer.append("var f = document.getElementById('" + formId + "');");
   buffer.append("f.action = f.action + '?pageNum=' + pageNum + '&pageSize="+pageSize + "';");
   buffer.append("f.submit();" );
   buffer.append("}");//}end
   buffer.append("</script>");//script-end
   
   out.print(buffer.toString());

   out.append("<div class='page-number-strip' style='height:62px;text-align: right;'> ");//page-number-strip
   out.print("<ul class='pagination'>");//添加Bootstrap分页的样式pagination
   int start = 1;
   int end = totalPage;
   for (int i = 4; i >= 1; i--) {
    if ((curPage - i) >= 1) {
    start = curPage - i;
    break;
    }
   }
   for (int i = 4; i >= 1; i--) {
    if ((curPage + i) <= totalPage) {
    end = curPage + i;
    break;
    }
   }
   // 如果小于9则右侧补齐
   if (end - start + 1 <= 9) {
    Integer padLen = 9 - (end - start + 1);
    for (int i = padLen; i >= 1; i--) {
    if ((end + i) <= totalPage) {
     end = end + i;
     break;
    }
    }
   }

   // 如果还小于9左侧补齐
   if (end - start + 1 <= 9) {
    Integer padLen = 9 - (end - start + 1);
    for (int i = padLen; i >= 1; i--) {
    if ((start - i) >= 1) {
     start = start - i;
     break;
    }
    }
   }

   if (curPage > 1) {
    if (start > 1) {
    out.print("<li><a href='javascript:go(1)'>首页</a></li>");
    }
    out.print("<li><a href='javascript:go(" + (curPage - 1) + ")'>上一页</a></li>");
   }

   for (int i = start; i <= end; i++) {
    if (i == curPage) {
    out.print("<li class='active'><a href='javascript:void(0);'>" + i + "</a></li>");
    } else {
    out.print("<li><a href='javascript:go(" + i + ")'>" + i + "</a></li>");
    }
   }
   if (curPage < totalPage) {
    out.print("<li><a href='javascript:go(" + (curPage + 1) + ")'>下一页</a></li>");
    if (end < totalPage) {
    out.print("<li><a href='javascript:go(" + totalPage + ")'>尾页</a></li>");
    }
   }
   out.print("<li><a href='javascript:void(0)'>共" + totalPage + "页" + this.totalCount + "条</a></li>");
   out.print("</ul>");
   out.print("</div>");
   }

  } catch (IOException e) {
   e.printStackTrace();
  }

  return super.doStartTag();

  }


  /**
  * 算开始索引
  * 
  * @param pageNum - 
  * @param pageSize
  * @return
  */
  public static Integer getStartIndex(Integer pageNum, Integer pageSize) {
  Integer res = 0;
  if (pageNum > 0) {
   res = (pageNum - 1) * pageSize;
  }
  return res;
  }
  
  /**
  * 算结束索引 -- 方法暂时未用
  * 
  * @param pageSize
  * @param totalCount
  * @param totalPage
  * @param pageNum
  * @return
  */
  public static Integer getLastIndex(Integer pageSize,Integer totalCount,Integer totalPage,Integer pageNum){
    //计算结束时候的索引
   Integer lastIndex =0;
   if( totalCount < pageSize){
    lastIndex = totalCount;
   }else if((totalCount % pageSize == 0) || (totalCount % pageSize != 0 && pageNum < totalPage)){
    lastIndex = pageNum * pageSize;
   }else if(totalCount % pageSize != 0 && pageNum == totalPage){//最后一页
    lastIndex = totalCount ;
   }
   return lastIndex;
  }
  
  
  public Integer getLastIndex() {
   return lastIndex;
  }

  public void setLastIndex(Integer lastIndex) {
   this.lastIndex = lastIndex;
  }

  public void setCurPage(Integer curPage) {
   this.curPage = curPage;
  }

  public void setPageSize(Integer pageSize) {
  this.pageSize = pageSize;
  }

  public void setTotalPage(Integer totalPage) {
  this.totalPage = totalPage;
  }

  public void setFormId(String formId) {
  this.formId = formId;
  }

  public Integer getTotalCount() {
  return totalCount;
  }

  public void setTotalCount(Integer totalCount) {
  this.totalCount = totalCount;
  }

}

分页action集成类-BaseController

package getui.controller;

import getui.util.Pager;

import java.util.Iterator;
import java.util.List;
import java.util.Map;

import org.springframework.ui.Model;

/**
 * 分页控件初始化父类
 * 
 * @author Anny
 */
public class BaseController {

 //初始化分页相关信息
 protected void initPage(Map<String,Object> map, Integer pageNum, Integer pageSize, Integer totalCount){
  if(null==pageSize || pageSize.equals("")){
   pageSize = 10; //每页显示条数
  }
//  if(pageSize>50){
//   pageSize = 50;
//  }
  Integer totalPage = (totalCount+pageSize-1)/pageSize;
  if(null==pageNum){
   pageNum = 1;
  }else if(pageNum>totalPage){
   pageNum = totalPage;
  }
  map.put("startIndex", Pager.getStartIndex(pageNum, pageSize));
  map.put("pageNum", pageNum);
  map.put("totalPage", totalPage);
  map.put("pageSize", pageSize);
  map.put("totalCount", totalCount);
  map.put("lastIndex", Pager.getLastIndex(pageSize,totalCount,totalPage,pageNum));
 }
 
 //将相关数据放入model
 protected void initResult(Model model, List<Map<String, Object>> list, Map<String,Object> map){
  model.addAttribute("list", list);
  Iterator it = map.entrySet().iterator(); 
  while(it.hasNext()){ 
   Map.Entry m = (Map.Entry)it.next(); 
   model.addAttribute(m.getKey().toString(), m.getValue());
  } 
 }
 
}

实例-Dao

package getui.dao;


import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import org.apache.log4j.Logger;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.ResultSetExtractor;
import org.springframework.jdbc.core.namedparam.BeanPropertySqlParameterSource;
import org.springframework.jdbc.core.namedparam.SqlParameterSource;
import org.springframework.stereotype.Repository;

import getui.controller.GeTuiController;
import getui.entity.Branch;
import getui.entity.GetuiInfo;

@Repository("bookDao")
public class BookDao extends BaseDao{
 
 /** 日志记录 .*/
 private static Logger logger = Logger.getLogger(BookDao.class);
 
 public int getListCount(){
  String sql ="select count(1) from Book";
  return super.jdbcTemplate.queryForInt(sql);
 }
 
 public List getListBook(int pageIndex,int pageSize){
  String sql = "select * from Book where 1=1 limit "+pageIndex+","+pageSize;
    
//  String sql = "select a.*"
//    + " from ("
//    +" select id as nid,name ,price"
//    +" from book"
//    +" order by(id) "
//    +" ) a"
//    +" where nid between "+pageIndex+" and "+pageSize+"";
  return super.jdbcTemplate.queryForList(sql);
 }
 
}

实例-service

package getui.service;

import getui.dao.BookDao;
import getui.dao.ClientInfoDao;
import getui.entity.Branch;
import getui.entity.GetuiInfo;

import java.util.List;
import java.util.Map;

import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service("bookService")
public class BookService {
 
 /** 日志记录 .*/
 private static Logger logger = Logger.getLogger(BookService.class);
 
 @Autowired
 private BookDao bookDao;
 
  public int getListCount(){
   return bookDao.getListCount();
  }
 
  public List getListBook(int pageIndex,int pageSize){
   return bookDao.getListBook(pageIndex, pageSize);
//   return bookDao.getListBook();
  }
}

实例-action

package getui.controller;

import getui.service.BookService;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
@RequestMapping(value = "/test")
public class TestController extends BaseController {
 
 /** 日志记录 .*/
 private static Logger logger = Logger.getLogger(TestController.class);
 
 @Autowired
 private BookService bookService;
 
 @RequestMapping("/test.do") 
 public String test(Model model,String type, @RequestParam(required=false) Integer pageNum, 
   @RequestParam(required=false) Integer pageSize) {  
   
  Map<String,Object> map = new HashMap<String,Object>(); 
  map.put("type", type);
  Integer totalCount = bookService.getListCount(); 
   
  this.initPage(map, pageNum, pageSize, totalCount); 
  List list = this.bookService.getListBook(Integer.valueOf(String.valueOf(map.get("startIndex"))),
             Integer.valueOf(String.valueOf(map.get("pageSize"))));
  this.initResult(model, list, map); 
   
  return "book"; 
 } 

}

实例-JSP

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="page" uri="/WEB-INF/pager.tld"%>
<% String path = request.getContextPath(); %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>测试分页标签</title>
 <link href="<%=path%>/css/bootstrap.css" rel="stylesheet">
 <link href="<%=path%>/css/bootstrap-responsive.css" rel="stylesheet">
 <script type="text/javascript">
  function toDel(id){
    var url = "<%=path%>/test/del?id=" + id +"&pageNum=${param.pageNum}&pageSize=${param.pageSize}";
    window.location.href = url;
  }
 </script>
</head>
<body>
 
 <div class="container">
   <c:forEach items="${list}" var="item">
     <div class="border-bottom1">
     <h3><a href="<%=path%>/test/view?id=${item.id}">${item.name}</a></h3>
     <p>
      ${item.content}
     </p>
     <p class="text-right muted">
      2013-06-22 22:37   
      <a href="javascript:toDel('${item.id}');">删除</a>  
      <a href="<%=path%>/test/toEdit?id=${item.id}&pageNum=${param.pageNum}&pageSize=${param.pageSize}">编辑</a>  
     </p>
    </div>
   </c:forEach>
   <form method="post" id="testForm" action="<%=path%>/test/test.do">
    <input type="hidden" name="type" value="${type}">
   </form>
   <page:createPager pageSize="${pageSize}" totalPage="${totalPage}" totalCount="${totalCount}" curPage="${pageNum}" formId="testForm"/>
 </div>
 
</body>
</html>

实例-SQL

/*
Navicat MySQL Data Transfer

Source Server   : 本地库
Source Server Version : 50621
Source Host   : localhost:3306
Source Database  : test

Target Server Type : MYSQL
Target Server Version : 50621
File Encoding   : 65001

Date: 2016-01-13 12:37:11
*/

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `book`
-- ----------------------------
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(20) DEFAULT NULL,
 `price` int(11) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=25 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of book
-- ----------------------------
INSERT INTO `book` VALUES ('1', '图书1', '10');
INSERT INTO `book` VALUES ('2', '图书2', '11');
INSERT INTO `book` VALUES ('3', '图书3', '12');
INSERT INTO `book` VALUES ('4', '图书4', '13');
INSERT INTO `book` VALUES ('5', '图书5', '14');
INSERT INTO `book` VALUES ('6', '图书6', '15');
INSERT INTO `book` VALUES ('7', '图书7', '16');
INSERT INTO `book` VALUES ('8', '图书8', '17');
INSERT INTO `book` VALUES ('9', '图书9', '18');
INSERT INTO `book` VALUES ('10', '图书10', '19');
INSERT INTO `book` VALUES ('11', '图书11', '11');
INSERT INTO `book` VALUES ('12', '图书12', '23');
INSERT INTO `book` VALUES ('13', '图书13', '22');
INSERT INTO `book` VALUES ('14', '图书14', '22');
INSERT INTO `book` VALUES ('15', '图书15', '22');
INSERT INTO `book` VALUES ('16', '图书16', '9');
INSERT INTO `book` VALUES ('17', '图书17', '10');
INSERT INTO `book` VALUES ('18', '图书18', '2');
INSERT INTO `book` VALUES ('19', '图书19', '8');
INSERT INTO `book` VALUES ('20', '图书20', '78');
INSERT INTO `book` VALUES ('21', '图书21', '21');
INSERT INTO `book` VALUES ('22', '图书22', '22');
INSERT INTO `book` VALUES ('23', '图书23', '23');
INSERT INTO `book` VALUES ('24', '图书24', '24');

实例图

测试示例图

Bootstrap和Java分页实例第二篇

分页融合到自己的代码中示例图

Bootstrap和Java分页实例第二篇

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

Javascript 相关文章推荐
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
Javascript webpack动态import
Apr 19 Javascript
JavaScript设计模式之原型模式详情
Jun 21 Javascript
js实现键盘自动打字效果
Dec 23 #Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 #Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 #Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 #Javascript
JS敏感词过滤代码
Dec 23 #Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 #Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 #Javascript
You might like
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php编写一个简单的路由类
2011/04/13 PHP
php学习之流程控制实现代码
2011/06/09 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
js资料prototype 属性
2007/03/13 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
javascript实现拖放效果
2015/12/16 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
老生常谈Python基础之字符编码
2017/06/14 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
小学科学教学反思
2014/01/26 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
会议室使用管理制度
2015/08/06 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL