浅而淡然_
html开发中bootstrap-table使用教程，这是用ssm写的这里边没有添加接口。
首先是粘上页面
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<%@ taglib uri="http://www.51sjk.com/Upload/Articles/1/0/263/263401_20210708000404164.jpg 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 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
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;
}
}
