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

这篇文章主要和大家轻松玩转BootstrapTable，后端使用SpringMVC+Hibernate，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

好，废话少说，上代码。

先上项目架构：

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

 <%@ page contentType="text/html;charset=UTF-8"%>    Bootstrap-table样例演示

重要的几点：

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 getPageInfo(int limit,int offset) { System.out.println("limit is:"+limit); System.out.println("offset is:"+offset); UserDao userDao = new UserDao(); Map 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 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 userList = query.list(); String sql2 = "select count(*) from User"; int totalRecord = Integer.parseInt(session.createQuery(sql2).uniqueResult().toString()); Map map = new HashMap(); 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:

web.xml:

  Archetype Created Web Application SpringMVCorg.springframework.web.servlet.DispatcherServlet1 SpringMVC/ default*.css default*.js default*.ttf default*.woff default*.woff2

pom.xml:

  4.0.0DemoBootstrapDemowar0.0.1-SNAPSHOTBootstrapDemo Maven Webapphttp://maven.apache.org  junitjunit3.8.1test javax.servletjavax.servlet-api3.1.0provided org.hibernatehibernate-core5.2.6.Final mysqlmysql-connector-java5.1.41 org.springframeworkspring-webmvc4.3.10.RELEASE com.fasterxml.jackson.corejackson-core2.8.9 com.fasterxml.jackson.corejackson-databind2.8.9 com.fasterxml.jackson.corejackson-annotations2.8.9 BootstrapDemo