前端使用Bootstrap进行表格检索数据,分页,日期格式转换
1. 页面引入需要的js、css
<!-- 引入的css文件 -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-table/dist/bootstrap-table.min.css"
rel="stylesheet">
<!-- 引入的js文件 -->
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
2. 表格插件的用法
$(function() {
/*初始化表格*/
initBootStrapTable(base_url+'/adminv2/empOpenCity/getList');
function initBootStrapTable(url) {
//先销毁表格
$('#user_list').bootstrapTable("destroy");
//加载表格
$('#user_list').bootstrapTable({
url: url,
method:'get',
toobar:'#toolbar',
cache: false,
striped: true, //是否显示行间隔色
pagination: true, //是否显示分页(*)
sidePagination: 'server', //分页方式:client客户端分页,server服务端分页(*)
dataField: "rows", //后端传递的要遍历的list集合名字必须是rows
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [5, 10, 30, 50], //可供选择的每页的行数(*)
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
// minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
// height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识,一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView:false, //是否显示详细视图
singleSelect:true, // 设置为true将禁止多选
queryParams: function (params) { //传递给后端的参数
var temp = {
pageSize:params.limit, //每页显示数量
page:params.offset //起始索引
// page:(params.offset / params.limit) + 1 //当前页码
};
return temp;
},
columns:[{
checkbox:true
},
{
field:'ouCode',
title:'地市编码',
},
{
field:'ouName',
title:'地市名称',
},
{
field:'isOpen',
title:'是否开通',
},
{
field:'createTimeString',
title:'创建时间',
formatter:formatterDate
},
{
field:'updateTime',
title:'修改时间',
formatter:formatterDate
},
{
title : '性别',
field : 'sex',
formatter : formatSex,//对返回的数据进行处理再显示
},
{
title:'操作',
field:'productid',
formatter : operation //对资源进行操作
}
]
});
}
});
//=================================显示1-->男,2-->女==================
//value代表该列的值,row代表当前对象
function formatSex(value, row, index) {
return value == 1 ? "男" : "女";
//或者 return row.sex == 1 ? "男" : "女";
}
//======================================操作===========================
//value代表该列的值,row代表当前对象
function operation(value, row, index) {
var htm = "<button type=\"button\" class=\"btn btn-info\" οnclick=\"onDeleteProduct('" + row.productid + "')\">删除</button>";
return htm;
}
//-============================后端传递过来的Date对象,进行相应的格式化处理=======================
/*日期格式化*/
function formatterDate(val) {
return dateFormatter(val);
}
function dateFormatter(val){
if(val==null||val==''){
return '';
}
var oldTime = (new Date(val)).getTime();
var curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss");
return curTime;
}
Date.prototype.format = function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
};
后端传递给前端的封装数据ResultMsg
List<EmpOpenCity> list = empOpenCityMapper.getList(empOpenCity);
int rowCount = empOpenCityMapper.getRowCount(empOpenCity);
ResultMsg resultMsg = new ResultMsg();
resultMsg.setRows(list); //遍历的集合数据
resultMsg.setTotal(rowCount); //总条数 ,属性名字必须要一样
resultMsg.setResult(true);
return resultMsg;
EmpOpenCity.java
EmpOpenCity extends Page implements Serializable{
//EmpOpenCity封装的是前端表格需要展示的数据
}
Page.java
public class Page {
//每页显示的数量
private int pageSize; //名字要和前端属性名一致,否则传递不过来
// // sql语句起始索引
private int page; //名字要和前端属性名一致,否则传递不过来
}
参考这个链接
Mybatis写sql语句使用like要使用CONCAT方法拼装字符串
LIKE CONCAT(’%’,#{name},’%’)
<select id="getUserListPage" resultType="com.debo.common.User">
SELECT * FROM user WHERE 1 = 1
<if test="name!=null and name !=''">
AND name LIKE CONCAT('%',#{name},'%')
</if>
<if test="tel!=null and tel !=''">
AND tel = #{tel}
</if>
</select>
写代码日志打印格式Logger
private final Logger logger = LoggerFactory.getLogger(this.getClass);
如果你不确定的时候,就打印出来logger日志。
打印格式
logger.info("==类名==方法名==in传入的参数",param);
logger.info("==类名==方法名==info",param);
不确定的时候,一般要try-cath
logger.error("==类名==方法名==error",e); //输出错误信息,并能够输出堆栈错误信息。