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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
javascript new后的constructor属性
Aug 05 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
简单的Jquery全选功能
Nov 07 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
Vue异步组件使用详解
Apr 08 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
基于JavaScript实现留言板功能
Mar 16 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 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 危险函数全解析
2009/09/09 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
use jscript List Installed Software
2007/06/11 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
node.js require() 源码解读
2015/12/13 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
js转换对象为xml
2017/02/17 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
python基于opencv检测程序运行效率
2019/12/28 Python
python 录制系统声音的示例
2020/12/21 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
法律工作求职自荐信
2013/10/31 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
演讲稿开场白台词
2014/08/25 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
十月围城观后感
2015/06/08 职场文书
反腐倡廉观后感
2015/06/08 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书