Bootstrap和Java分頁(yè)實(shí)例第二篇
更新時(shí)間：2016年12月23日 14:40:39 作者：菠蘿小妹
這篇文章主要為大家詳細(xì)介紹了Bootstrap和Java分頁(yè)實(shí)例第二篇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
關(guān)于此文
運(yùn)用第一篇分頁(yè)的例子，結(jié)果以失敗告終。在網(wǎng)上又尋找了很多例子。大多是都是這一種。著手開發(fā)的項(xiàng)目采用spring MVC框架。符合需求。摘下來(lái)，試了一試。
網(wǎng)上的例子總是少一些東西。經(jīng)過(guò)一番折騰。終于搞定了。下面分享出來(lái)，供參考。
分頁(yè)基本邏輯思想懂了，重點(diǎn)是在于怎么實(shí)現(xiàn)。怎么實(shí)現(xiàn)更好。還需要進(jìn)一步思考。
配置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>
分頁(yè)控件-Pager
package getui.util;
import java.io.IOException;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;
/***
* 分頁(yè)控件
*
* @author Anny
*/
public class Pager extends TagSupport {
private Integer curPage; //當(dāng)前頁(yè)碼
private Integer totalPage; //總頁(yè)數(shù)
private Integer pageSize = 10; //一頁(yè)顯示的記錄數(shù)
private Integer totalCount = 0; //記錄總數(shù)
private String formId; //請(qǐng)求的action name
private Integer lastIndex; //結(jié)束索引
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分頁(yè)的樣式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則右側(cè)補(bǔ)齊
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左側(cè)補(bǔ)齊
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)'>首頁(yè)</a></li>");
}
out.print("<li><a href='javascript:go(" + (curPage - 1) + ")'>上一頁(yè)</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) + ")'>下一頁(yè)</a></li>");
if (end < totalPage) {
out.print("<li><a href='javascript:go(" + totalPage + ")'>尾頁(yè)</a></li>");
}
}
out.print("<li><a href='javascript:void(0)'>共" + totalPage + "頁(yè)" + 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;
}
/**
* 算結(jié)束索引 -- 方法暫時(shí)未用
*
* @param pageSize
* @param totalCount
* @param totalPage
* @param pageNum
* @return
*/
public static Integer getLastIndex(Integer pageSize,Integer totalCount,Integer totalPage,Integer pageNum){
//計(jì)算結(jié)束時(shí)候的索引
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){//最后一頁(yè)
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;
}
}
分頁(yè)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;
/**
* 分頁(yè)控件初始化父類
*
* @author Anny
*/
public class BaseController {
//初始化分頁(yè)相關(guān)信息
protected void initPage(Map<String,Object> map, Integer pageNum, Integer pageSize, Integer totalCount){
if(null==pageSize || pageSize.equals("")){
pageSize = 10; //每頁(yè)顯示條數(shù)
}
// 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));
}
//將相關(guān)數(shù)據(jù)放入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());
}
}
}
實(shí)例-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);
}
}
實(shí)例-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();
}
}
實(shí)例-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";
}
}
實(shí)例-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>測(cè)試分頁(yè)標(biāo)簽</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>
實(shí)例-SQL
/*
Navicat MySQL Data Transfer
Source Server : 本地庫(kù)
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');
實(shí)例圖
測(cè)試示例圖
分頁(yè)融合到自己的代碼中示例圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap和Java分頁(yè)實(shí)例第一篇
- BootStrap與validator 使用筆記(JAVA SpringMVC實(shí)現(xiàn))
- 使用java基于pushlet和bootstrap實(shí)現(xiàn)的簡(jiǎn)單聊天室
- 值得分享的最全面Bootstrap快速人門案例
- 值得分享的Bootstrap Table使用教程
- 值得分享的bootstrap table實(shí)例
- 值得分享的輕量級(jí)Bootstrap Table表格插件
- 值得分享和收藏的Bootstrap學(xué)習(xí)教程
- 值得分享的Bootstrap Ace模板實(shí)現(xiàn)菜單和Tab頁(yè)效果
- 基于Bootstrap的Java開發(fā)問(wèn)題匯總（Spring MVC）
相關(guān)文章
微信小程序使用百度AI識(shí)別接口的通用封裝Promise詳解
這篇文章主要介紹了微信小程序使用百度AI識(shí)別接口的通用封裝Promise,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
解決JS請(qǐng)求服務(wù)器gbk文件亂碼的問(wèn)題
本文給大家介紹js請(qǐng)求服務(wù)器gbk文件亂碼問(wèn)題，解決辦法需要設(shè)置xhr.overrideMimeType("text/csv;charset=gb2312");才正確，具體代碼怎么設(shè)置，將在本文中給大家提到，需要的朋友一起學(xué)習(xí)吧2015-10-10
輸入內(nèi)容活直接點(diǎn)轉(zhuǎn)換即可，講單詞的首字母大寫。2008-09-09
在頁(yè)面上，用戶會(huì)有很多的操作 ，每進(jìn)行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個(gè)問(wèn)題，我們應(yīng)如何去展示不同的結(jié)果呢？2009-12-12
javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法
下面小編就為大家?guī)?lái)一篇javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
Javascript中八種遍歷方法的執(zhí)行速度深度對(duì)比
關(guān)于數(shù)組或?qū)ο蟊闅v，相信很多人都沒(méi)有深入觀察過(guò)執(zhí)行效率。這是一個(gè)曾在群里吵翻天的話題，讀懂后你將成為遍歷效率話題的大師。下面這篇文章主要介紹了Javascript中八種遍歷方法執(zhí)行速度深度對(duì)比的相關(guān)資料，需要的朋友可以參考下。2017-04-04
這篇文章主要為大家詳細(xì)介紹了JS百度地圖搜索懸浮窗功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
基于Marquee.js插件實(shí)現(xiàn)的跑馬燈效果示例
這篇文章主要介紹了基于Marquee.js插件實(shí)現(xiàn)的跑馬燈效果,結(jié)合實(shí)例形式給出了Marquee.js插件的定義及具體使用方法,需要的朋友可以參考下2017-01-01
本篇文章主要介紹了用ES6寫全屏滾動(dòng)插件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了js獲取url傳值的方法,實(shí)例分析了字符串分割與正則分析兩種方法,并補(bǔ)充了一個(gè)基于正則匹配實(shí)現(xiàn)的js獲取url的get傳值函數(shù),需要的朋友可以參考下2015-12-12