轻松玩转BootstrapTable（后端使用SpringMVC+Hibernate）
还是那句老话，好记性不如烂笔头。记得以前的一个Demo项目里面有分页，但是没有用插件，自己手写的分页处理，但是效果并不是很好，最近接触到插件BootstrapTable，风格和Bootstrap统一，现在就来说说怎样使用它。
初上手，直接套json数据进去，然后设置分页方式为client'，很快表格就做出来，但是一般项目中都是使用后台来进行分页的，不可能一下从数据库从捞出成千上万条数据，先不说流量的问题，客户端的渲染也吃力。在使用服务器后端分页的过程中，也遇到了一些问题，相信大部分初次接触BootstrapTable的人应该都会遇到。所以特此写一个完整的例子，后面应该还会继续完善，包括增、删、改。
好，废话少说，上代码。
先上项目架构：
项目使用maven构建，由于项目结构不是很复杂，所以就不做过多介绍。
接下来看index.jsp
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-table.css" type="text/css">
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">Bootstrap-table样例演示</h3>
</div>
<div class="panel-body">
<div id="toolbar" class="btn-group">
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table data-toggle="table" id="table" data-height="400"
data-classes="table table-hover" data-striped="true"
data-pagination="true" data-side-pagination="server"
data-search="true" data-show-refresh="true" data-show-toggle="true"
data-show-columns="true" data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="state" data-checkbox='ture'></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</body>
<script type="text/javascript">
$("#superBtn").click(function() {
$.get("getPageInfo?limit=5&offset=0", function(data, status) {
alert(status);
alert(data.userList[0].name);
});
});
$(document).ready(function(){
$("button[name='toggle']").height(20);
$("button[name='refresh']").height(20);
});
function edit(id) {
alert(id);
}
$("#table")
.bootstrapTable(
{
url : "getPageInfo", //数据请求路径
clickToSelect : true, //点击表格项即可选择
dataType : "json", //后端数据传递类型
pageSize : 5,
pageList : [ 5, 10, 20 ],
// contentType : "application/x-www-form-urlencoded",
method : 'get', //请求类型
dataField : "data", //很重要，这是后端返回的实体数据！
//是否显示详细视图和列表视图的切换按钮
queryParams : function(params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
return {//这里的params是table提供的
offset : params.offset,//从数据库第几条记录开始
limit : params.limit
//找多少条
};
},
responseHandler : function(res) {
//在ajax获取到数据，渲染表格之前，修改数据源
return res;
},
columns : [
{
field : 'state',
},
{
field : 'id',
title : 'ID',
align : 'center'
},
{
field : 'name',
title : '姓名',
align : 'center'
},
{
field : 'age',
title : '年龄',
align : 'center'
},
{
field : 'address',
title : '地址',
align : 'center'
},
{
title : '操作',
field : 'id',
align : 'center',
formatter : function(value, row, index) {
var e = '<a href="#" mce_href="#" onclick="edit(\''
+ row.id + '\')">编辑</a> ';
var d = '<a href="#" mce_href="#" onclick="del(\''
+ row.id + '\')">删除</a> ';
return e + d;
}
} ]
});
</script>
</html>
重要的几点：
1、导入必要的css文件和js文件，并注意版本问题，这个后面会谈
2、queryParams：这是在点击分页或者初次加载表格的时候，前端向后端传递的数据，有2个，分别是limit和offset，limit表示请求的记录条数，offset表示记录的偏移量
3、dataField：表示后端传递的对象数据，名字要与对象的名字相同。
再来看Controller：
package controller;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import dao.UserDao;
@Controller
public class BootstrapTableController {
@RequestMapping("/getPageInfo")
public @ResponseBody Map<String,Object> getPageInfo(int limit,int offset) {
System.out.println("limit is:"+limit);
System.out.println("offset is:"+offset);
UserDao userDao = new UserDao();
Map<String,Object> map = userDao.queryPageInfo(limit, offset);
return map;
}
}
Controller接收前端传过来的limit和offset参数，然后根据这2个参数调用dao层方法来获取数据。再看UserDao：
package dao;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.Transaction;
import org.hibernate.cfg.Configuration;
import org.hibernate.query.Query;
import entity.User;
public class UserDao {
private Session session;
private Transaction transaction;
public Session getSession() {
Configuration config = new Configuration().configure();
SessionFactory sessionFactory = config.buildSessionFactory();
Session session = sessionFactory.openSession();
return session;
}
public Map<String, Object> queryPageInfo(int limit, int offset) {
String sql = "from User";
Session session = this.getSession();
Query query = session.createQuery(sql);
query.setFirstResult(offset);
query.setMaxResults(limit);
List<User> userList = query.list();
String sql2 = "select count(*) from User";
int totalRecord = Integer.parseInt(session.createQuery(sql2).uniqueResult().toString());
Map<String, Object> map = new HashMap<String, Object>();
map.put("total", totalRecord);
map.put("data", userList);
return map;
}
}
userDao也是比较简单的，关键就是total和data了，这是要返回到前台的数据，注意名字要和前台相对应，你只要返回实体数据和记录总数就可以了，剩下的BootstrapTable替你搞定。
接下来在看看entity层的User
package entity;
public class User {
private int id;
private String name;
private int age;
private String address;
public User() {
super();
}
public User(int id,String name, int age, String address) {
super();
this.id = id;
this.name = name;
this.age = age;
this.address = address;
}
public String getName() {
return name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
@Override
public String toString() {
return "User [id=" + id + ", name=" + name + ", age=" + age + ", address=" + address + "]";
}
}
还有几个配置文件，分别是SpirngMVC的配置文件，还有web.xml以及pom.xml，该配的得配上：
SpringMVC-servlet.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:util="http://www.springframework.org/schema/util" xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
http://www.springframework.org/schema/util
http://www.springframework.org/schema/util/spring-util-4.3.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.3.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd">
<!-- <mvc:annotation-driven/> -->
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="org.springframework.http.converter.StringHttpMessageConverter" />
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" />
</mvc:message-converters>
</mvc:annotation-driven>
<context:component-scan base-package="controller"/>
<!-- 这两个类用来启动基于Spring MVC的注解功能，将控制器与方法映射加入到容器中 -->
<bean
class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />
<bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
<!-- 这个类用于Spring MVC视图解析 -->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/pages/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
web.xml:
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
<servlet>
<servlet-name>SpringMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.css</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.js</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.ttf</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.woff</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.woff2</url-pattern>
</servlet-mapping>
</web-app>
pom.xml:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>Demo</groupId>
<artifactId>BootstrapDemo</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>BootstrapDemo Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-core</artifactId>
<version>5.2.6.Final</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.41</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.10.RELEASE</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.8.9</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.9</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.8.9</version>
</dependency>
</dependencies>
<build>
<finalName>BootstrapDemo</finalName>
</build>
</project>
然后dao层的就算了，很简单。到这里基本上所有的关键都已经展示了，来看看效果吧：
不知道细心的你注意到没有，右上角的一个按钮明显大了一圈，这不太好，其实是它左边2个按钮小了一圈，在网上找了很久，基本上没有人遇到这样的问题，没办法，逼我出绝招，使用调试器跟踪这两个按钮元素，最后使用jQuery在表格加载完毕然后手动改变其大小，然后正常了。
当然，这只涉及到了查数据，还有数据的删除、新增和修改，后面再来介绍这些的实现，其实最关键的还是查，查做出来了，其他的就水到渠成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
hibernate增删改查操作代码
Hibernate对数据删除操作 删除User表中个一条数据,是需要更具User表的主键id值来删除的.首先根据id值向数据库中查询出来对应的对象.可以采用两种方式一是session的get方法,一个是session的load方法. Session的Get方法:调用这个方法会返回一个Object对象.然后我们对其强制转换.Useruser = (User)session.get(User.class," 402881e5441c035e01441c0360510003"); 当我们传递
-
Hibernate多对一单项关联
概念 基本映射是对一个实体进行映射,关联映射就是处理多个实体之间的关系,将关联关系映射到数据库中,所谓的关联关系在对象模型中有一个或多个引用. 分类 关联关系分为上述七种,但是由于相互之间有各种关系,可以简化,例如:多对一与一对多映射,只是侧重的角度不对而已. 映射技巧 映射技巧是小编写映射文件的过程,总结的经典内容,总共分为四步,咋看不是特别易懂,但是效果很好.下面我们以实例看技巧. (1)写注释 解释:在写映射文件之前先写注释,将问号的地方填上相应的内容.例如:<!-- group属性,表
-
hibernate4基本配置方式详解
可编程的配置方式-1 如果在配置cfg.xml的时候,不想在里面配置hbm.xml怎么办呢?可在程序里使用可编程的配置方式,也就是使用程序来指定在cfg.xml里面的配置信息,不推荐这种方式.如下: Configuration cfg= new Configuration() .addResource("Item.hbm.xml") .addResource("Bid.hbm.xml"); 一个替代方法(有时是更好选择)是,指定被映射的类,让Hibernate帮你寻
-
Hibernate核心思想与接口简介
hibernate是一个采用ORM机制持久层的开源框架,接下来我们聊聊它的核心思想和接口. 核心思想:ORM是将表与表之间的操作,映射成对象和对象之间的操作,这样简化了持久层的代码,减轻了程序员的负担 ORM是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.简单的说,ORM是通过使用描述对象和数据库之间映射的元数据,将java程序中的对象自动持久化到关系数据库中.本质上就是将数据从一种形式转换到另外一种形式. 所有的Hibernate应用中都会访问Hibernate的5个核心接口.
-
详解Java中Hibernate的基本原理
在开始学Hibernate之前,一直就有人说:Hibernate并不难,无非是对JDBC进一步封装.一句不难,难道是真的不难还是眼高手低? 如果只是停留在使用的层面上,我相信什么技术都不难,看看别人怎么做的,你也可以很快上手. 这难道是学习的最终目的吗? 不是,绝对不是.我们需要了解这门技术的基本概念,它到底是什么,它是干什么的,它有什么优缺点.下面我就带领大家一起回顾一下Hibernate: 什么是Hibernate? Hibernate,翻译过来是冬眠的意思,正好现在已经进入秋季,世间万物开
-
轻松玩转BootstrapTable（后端使用SpringMVC+Hibernate）
还是那句老话,好记性不如烂笔头.记得以前的一个Demo项目里面有分页,但是没有用插件,自己手写的分页处理,但是效果并不是很好,最近接触到插件BootstrapTable,风格和Bootstrap统一,现在就来说说怎样使用它. 初上手,直接套json数据进去,然后设置分页方式为client',很快表格就做出来,但是一般项目中都是使用后台来进行分页的,不可能一下从数据库从捞出成千上万条数据,先不说流量的问题,客户端的渲染也吃力.在使用服务器后端分页的过程中,也遇到了一些问题,相信大部分初次接触Boo
-
Java框架篇：Spring+SpringMVC+hibernate整合开发
前言: 最近没什么事做,搭个框架写成博客记录下来,拉通一下之前所学知识. 话不多说,我们直接步入正题. 准备工作: 1/安装并配置java运行环境 2/数据库的安装配置(Mysql) 3/安装并配置服务器(Tomcat) 4/Maven 5/ IntelliJIDEA的安装配置(本人使用的主要软件是IntelliJIDEA,没用eclipse什么的) 6/ 使用IntelliJIDEA创建一个web app项目. 貌似就这些了吧 导包 不同于以往的导包,由于我们创建的是maven的webapp项
-
基于springMvc+hibernate的web application的构建
闲来没事,想整理下一些知识. 这篇文章是关于spring的web程序的搭建,有什么不对的地方希望大家批评指正. 首先我们要了解什么是spring,这里可能很多大家也都明白,无非是一个管理对象的一个容器,主要体现在IOC注入和AOP切面编程. 关于上面的两点在后面一点会给大家更具体的说明一下是什么. 简单的来说,以前大家编程实例化都是自己在控制,这样真的好吗? 下面是不用spring的写法,我们先假定有一个类是下面这样的: public class Worker { public void say
-
Maven 搭建SpringMVC+Hibernate项目详解
前言 今天复习一下SpringMVC+Hibernate的搭建,本来想着将Spring-Security权限控制框架也映入其中的,但是发现内容太多了,Spring-Security的就留在下一篇吧,这篇主要搭建SpringMVC4.1.4和Hibernate4.3.8,之前也打了好多SpringMVC的,这部分已经非常的熟悉了,毕竟业开发过一年多SpringMVC的,这次持久层采用Hibernate,数据源采用c3p0,数据库暂采用MySQL,主要是想复习一下Hibernate.搭建Spring
-
Spring+SpringMVC+Hibernate整合实例讲解
使用Maven构建项目,用pom.xml引入相应jar,配置以下文件 创建spring.xml: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.springframework.org/schema/beans" xmlns
-
bootstrap-table后端分页功能完整实例
本文实例讲述了bootstrap-table后端分页功能.分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页 插件资源点击此处本站下载. 引用以下css <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="styleshee
-
基于spring+springmvc+hibernate 整合深入剖析
目录 1.新建一个maven web项目 2.pom文件,导入jar包 3.配置文件 4.spring-mvc和spring整合 5.spring和hibernate整合 6.总结 三大框架反反复复搭了很多次,虽然每次都能搭起来,但是效率不高.最近重新搭了一次,理顺了思路,整理了需要注意的地方,分享出来. 工具:Eclipse(jdk 1.7) spring和hibernate版本均为4.0以上 推荐使用maven构建项目,相比自己手动导入jar包要方便很多. 1.新建一个maven web项目
-
Python openpyxl模块学习之轻松玩转Excel
目录 前言 openpyxl 安装 打开/创建工作簿 访问工作表 获取单元格信息 修改工作表 修改样式 前言 当你需要每天对 Excel 做大量重复的操作,如果只靠人工来做既浪费时间,又十分枯燥,好在 Python 为我们提供了许多操作 Excel 的模块,能够让我们从繁琐的工作中腾出双手. 今天就和大家分享一个快速处理 Excel 的模块 openpyxl,它的功能相对与其他模块更为齐全,足够应对日常出现的问题. openpyxl 安装 直接在命令提示符中输入. pip install ope
-
轻松玩转VMWare虚拟机之安装GHOST系统图文教程第1/2页
VMWare是一个"虚拟PC"软件.它使你可以在一台机器上同时运行二个或更多Windows.DOS.LINUX系统.与"多启动"系统相比,VMWare采用了完全不同的概念.多启动系统在一个时刻只能运行一个系统,在系统切换时需要重新启动机器.VMWare是真正"同时"运行,多个操作系统在主系统的平台上,就象标准Windows应用程序那样切换.而且每个操作系统你都可以进行虚拟的分区.配置而不影响真实硬盘的数据,你甚至可以通过网卡将几台虚拟机用网卡连接
-
轻松玩转Java配置的Classpath
和Java类路径(classpath)打交道的过程中,开发者偶尔会遇到麻烦.这是因为,类装载器实际装入的是哪一个类有时并不显而易见,当应用程序的classpath包含大量的类和目录时,情况尤其严重.本文将提供一个工具,它能够显示出被装入类文件的绝对路径名. 一.Classpath基础 Java虚拟机(JVM)借助类装载器装入应用程序使用的类,具体装入哪些类根据当时的需要决定.CLASSPATH环境变量告诉类装载器到哪里去寻找第三方提供的类和用户定义的类.另外,你也可以使用JVM命令行参数-cla