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 相关文章推荐
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
uniapp实现可以左右滑动导航栏
Oct 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
PHP中for循环语句的几种变型
2007/03/16 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
php实现Mysql简易操作类
2015/10/11 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
python之DataFrame实现excel合并单元格
2021/02/22 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
异常和异常类的概念
2014/09/12 面试题
2014年文学毕业生自我鉴定
2014/04/23 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
工作时间证明
2015/06/15 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers