核心提示：html开发中bootstrap-table使用教程，这是用SSM写的这里边没有添加接口。首先是粘上页面jsp%@ page language=java import=java.util.* page...
html开发中bootstrap-table使用教程，这是用SSM写的这里边没有添加接口。
首先是粘上页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="https://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String contextPath = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- 导入jQuery -->
<script type="text/javascript"
src="<%=contextPath%>/js/jquery-3.2.1.min.js"></script>
<!-- 导入bootstrap -->
<script type="text/javascript" src="<%=contextPath%>/js/bootstrap.js"></script>
<link href="<%=contextPath%>/css/bootstrap.css" rel="stylesheet" />
<!-- 导入bootstrap-table -->
<script type="text/javascript"
src="<%=contextPath%>/js/bootstrap-table.min.js"></script>
<script type="text/javascript"
src="<%=contextPath%>/js/bootstrap-table-zh-CN.js"></script>
<link href="<%=contextPath%>/css/bootstrap-table.min.css"
rel="stylesheet" />
</head>
body>
<p class="container">
<table data-height="540" id="tb_departments"
class="table-striped table-hover" data-mobile-responsive="true"></table>
</p>
</body>
<script type="text/javascript">
$(function() {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
});
var TableInit = function() {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function() {
$('#tb_departments')
.bootstrapTable(
{
url : '<%=contextPath%>/BootstraoSelectVisit.action', //请求后台的URL（*）
method : 'get', //请求方式（*）
editable : true,
striped : true, //是否显示行间隔色
cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination : true, //是否显示分页（*）
cardView : false, //是否显示详细视图
smartDisplay : true, // 智能显示 pagination 和 cardview 等
sortable : true, //是否启用排序
sortOrder : "desc", //排序方式
queryParams : oTableInit.queryParams, //传递参数（*）
sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber : 1, //初始化加载第一页，默认第一页
pageSize : 10, //每页的记录行数（*）
pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
//responseHandler:responseHandler,//请求数据成功后，渲染表格前的方法
//onClickRow:oTableInit.onClickRow,//表格单击事件
search : false, //显示搜索框
clickToSelect : true, //是否启用点击选中行
showExport : true, //是否显示导出
exportDataType : "basic", //basic', 'all', 'selected'.
uniqueId : "id", //每一行的唯一标识，一般为主键列
columns : [
{
checkbox : true
},
{
field : 'id',
title : '编号',
align : 'center'
},
{
field : 'unit',
title : '单位',
align : 'center'
},
{
field : 'number',
title : '人数',
align : 'center'
},
{
field : 'date',
title : '时间',
align : 'center',
overflow : 'hidden',
}]
});
};
//得到查询的参数
oTableInit.queryParams = function(params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit : params.limit, //页面大小
offset : params.offset,//页码
};
return temp;
};
oTableInit.onClickRow = function() {
alert("onClickRow");
}
return oTableInit;
};
</script>
</html>
然后是action层
@RequestMapping("/BootstraoSelectVisit")
public void BootstraoSelectVisit(Visit visit,HttpServletRequest request,HttpServletResponse response){
/* TablePage */
//获取分页查询结果
Visit bootstrapPageData = visitService.getBootstrapPageData(visit);
//将其转化为json字符串
String s = JSONObject.fromObject(bootstrapPageData).toString();
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
try {
response.getWriter().print(s);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
接下来是service层
@Override
public Visit getBootstrapPageData(Visit visit) {
//获取前台穿过来的页面大小
int limit = visit.getLimit();
//获取前台穿过来的页码
int offset = visit.getOffset();
if (limit==0) {
visit.setLimit(10);
}
//根据页面大小和页码查询数据库中的数据
List<Visit> repairsFind = visitDao.repairsFindByPage(visit);
List<TablePage> rowsList = new ArrayList<TablePage>();
//将数据循环放入集合
for (int i=0; i < visit.getLimit(); i++){
if(i >= repairsFind.size()){
break;
}
TablePage t = repairsFind.get(i);
rowsList.add(t);
}
//将集合放入到分页中
visit.setRows(rowsList);
//查询总共有多少条数据，并放入到分页类中
Integer countByRepairs = visitDao.getCountByRepairs(visit);
visit.setTotal(Long.valueOf(countByRepairs));
return visit;
}
这两个是涉及到的 Dao 层
<select id="repairsFindByPage" parameterType="com.syy.bean.Visit" resultType="com.syy.bean.Visit">
select * from visit where 1=1
<if test="id!=null and id!=''">
and id=#{id}
</if>
<if test="unit !=null and unit !=''">
and unit like CONCAT('%','${unit}','%')
</if>
<if test="number !=null and number !=''">
and number like CONCAT('%','${number}','%')
</if>
<if test="date !=null and date !=''">
and date like CONCAT('%','${date}','%')
</if>
limit #{offset},#{limit}
</select>
<select id="getCountByRepairs" resultType="int" parameterType="com.syy.bean.Visit">
select count(*) from visit where 1=1
<if test="id!=null and id!=''">
and id=#{id}
</if>
<if test="unit !=null and unit !=''">
and unit like CONCAT('%','${unit}','%')
</if>
<if test="number !=null and number !=''">
and number like CONCAT('%','${number}','%')
</if>
<if test="date !=null and date !=''">
and date like CONCAT('%','${date}','%')
</if>
</select>
还有一个就是涉及到的封装类
public class TablePage<T> {
private Long total;
private List<T> rows;
private int limit;
private int offset ;
private String order ="asc";
public Long getTotal() {
return total;
}
public void setTotal(Long total) {
this.total = total;
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
public int getOffset() {
return offset;
}
public void setOffset(int offset) {
this.offset = offset;
}
public String getOrder() {
return order;
}
public void setOrder(String order) {
this.order = order;
}
}
