您的位置：首页 > Web前端 > BootStrap

bootstrap-table的使用

2017-11-20 17:34 363 查看

刚刚搞完了一个bootstrap-table 写的表格，俗话说好记星不如烂笔头我就在这把他给记下来

这是用SSM写的这里边没有添加接口

首先是粘上页面

jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://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>

<div class="container">
<table data-height="540" id="tb_departments"
class="table-striped table-hover" data-mobile-responsive="true"></table>
</div>

</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 =
9b65
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;
}
}

基本就是这些

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航