轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)

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

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

好,废话少说,上代码。

先上项目架构:

轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)

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

<%@ page contentType="text/html;charset=UTF-8"%> <html> <link href="https://www.jb51.net/css/bootstrap.css" type="text/css" /> <link href="https://www.jb51.net/css/bootstrap-table.css" type="text/css"> <script type="text/javascript" src="https://www.jb51.net/js/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap-table.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap-table-zh-CN.js"></script> <body> <div> <div> <h3>Bootstrap-table样例演示</h3> </div> <div> <div> <button type="button"> <span aria-hidden="true"></span>修改 </button> <button type="button"> <span aria-hidden="true"></span>删除 </button> </div> <table data-toggle="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="#">编辑</a> '; var d = '<a href="#" mce_href="#">删除</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:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wygdzd.html