轻松玩转BootstrapTable（后端使用SpringMVC+Hibernate）

发布时间：2020-12-15 01:54:19 所属栏目：大数据来源：网络整理

导读：还是那句老话，好记性不如烂笔头。记得以前的一个Demo项目里面有分页，但是没有用插件，自己手写的分页处理，但是效果并不是很好，最近接触到插件BootstrapTable，风格和Bootstrap统一，现在就来说说怎样使用它。初上手，直接套json数据进去，然后设置分页

还是那句老话，好记性不如烂笔头。记得以前的一个Demo项目里面有分页，但是没有用插件，自己手写的分页处理，但是效果并不是很好，最近接触到插件BootstrapTable，风格和Bootstrap统一，现在就来说说怎样使用它。

初上手，直接套json数据进去，然后设置分页方式为client'，很快表格就做出来，但是一般项目中都是使用后台来进行分页的，不可能一下从数据库从捞出成千上万条数据，先不说流量的问题，客户端的渲染也吃力。在使用服务器后端分页的过程中，也遇到了一些问题，相信大部分初次接触BootstrapTable的人应该都会遇到。所以特此写一个完整的例子，后面应该还会继续完善，包括增、删、改。

好，废话少说，上代码。

先上项目架构：

项目使用maven构建，由于项目结构不是很复杂，所以就不做过多介绍。接下来看index.jsp

重要的几点：

1、导入必要的css文件和js文件，并注意版本问题，这个后面会谈

2、queryParams：这是在点击分页或者初次加载表格的时候，前端向后端传递的数据，有2个，分别是limit和offset，limit表示请求的记录条数，offset表示记录的偏移量

3、dataField：表示后端传递的对象数据，名字要与对象的名字相同。

再来看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：

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

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:

-->

<context:component-scan base-package="controller"/>

web.xml:

Archetype Created Web Application

SpringMVC

org.springframework.web.servlet.DispatcherServlet

SpringMVC

default

*.css

default

*.js

default

*.ttf

default

*.woff

default

*.woff2

pom.xml:

4.0.0 Demo BootstrapDemo war 0.0.1-SNAPSHOT BootstrapDemo Maven Webapp http://maven.apache.org junit junit 3.8.1 test javax.servlet javax.servlet-api 3.1.0 provided org.hibernate hibernate-core 5.2.6.Final

<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>

BootstrapDemo

然后dao层的就算了，很简单。到这里基本上所有的关键都已经展示了，来看看效果吧：

不知道细心的你注意到没有，右上角的一个按钮明显大了一圈，这不太好，其实是它左边2个按钮小了一圈，在网上找了很久，基本上没有人遇到这样的问题，没办法，逼我出绝招，使用调试器跟踪这两个按钮元素，最后使用jQuery在表格加载完毕然后手动改变其大小，然后正常了。

当然，这只涉及到了查数据，还有数据的删除、新增和修改，后面再来介绍这些的实现，其实最关键的还是查，查做出来了，其他的就水到渠成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!