首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 06, 2017

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

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

好，废话少说，上代码。

先上项目架构：

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

项目使用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层的就算了，很简单。到这里基本上所有的关键都已经展示了，来看看效果吧：

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

kkorkk

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题
Dec 11 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
浅析js封装和作用域
Jul 09 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
vue mixins组件复用的几种方式（小结）
Sep 06 #Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 #Javascript
jquery实现限制textarea输入字数的方法
Sep 06 #jQuery
Vue的百度地图插件尝试使用
Sep 06 #Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 #Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 #Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 #jQuery
OpenLayer(1) 多维数组(1) 二维数组(2) 嵌套(1) 循环(3) 安卓(1) 移动开发(2) IDEA(2) Sqlite(2) android studio(3)
You might like
PHP的面试题集,附我的答案和分析（一）
2006/11/19 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
AngularJS入门教程（零）：引导程序
2014/12/06 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
Python面向对象中类（class）的简单理解与用法分析
2020/02/21 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
迷你分体式空调：SoGoodToBuy
2018/08/07 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
大型车展策划方案
2014/02/01 职场文书
2014年化验员工作总结
2014/11/18 职场文书
2014年法务工作总结
2014/12/11 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
标会主持词应该怎么写？
2019/08/15 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
人民币符号
2022/02/17 杂记
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android