轻松玩转BootstrapTable（后端使用SpringMVC+Hibernate）-eolink官网

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

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

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

好，废话少说，上代码。

先上项目架构：

项目使用maven构建，由于项目结构不是很复杂，所以就不做过多介绍。

接下来看index.jsp

<%@ page contentType="text/html;charset=UTF-8"%>

修改

删除

data-classes="table table-hover" data-striped="true"

data-paginatimpCHldJon="true" data-side-pagination="server"

data-search="true" data-show-refresh="true" data-show-toggle="true"

data-show-columns="true" data-toolbar="#toolbar">

重要的几点：

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;

imporhttp://t 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:

xmlns:xsi="http://w3.org/2001/XMLSchema-instance" xmlns:p="http://springframework.org/schema/p"

xmlns:context="http://springframework.org/schema/context"

xmlns:util="http://springframework.org/schema/util" xmlns:mvc="http://springframework.org/schema/mvc"

xsi:schemaLocation="

http://springframework.org/schema/beans

http://springframework.org/schema/beans/spring-beans-4.3.xsd

http://springframework.org/schema/util

http://springframework.org/schema/util/spring-util-4.3.xsd

http://springframework.org/schema/context

http://springframework.org/schema/context/spring-context-4.3.xsd

http://springframework.org/schema/mvc

http://springframework.org/schema/mvc/spring-mvc-4.3.xsd">

class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />

class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />

class="org.springframework.web.servlet.view.InternalResourceViewResolver">