bootstrap table + spring mvc 服务的分页
2015-12-28 10:19
483 查看
<table id='applyNoTable' data-events='operateEvents' ></table>
$("#applyNoTable").bootstrapTable({
// url:"/apply/findByAll", //请求url
method: 'get', //服务的必须设置为get
detailView:true, //显示行详细信息
// sidePagination:'server',//设置为服务器端分页
idField:"id", //标识字段
pagination:true, //显示分页
toolbar:"#toolbar", // 工具栏
toolbarAlign:"left", //工具栏位置
queryParamsType:"limit", //请求附带其他参数必须设置为 limit
queryParams:queryParamsfun, //附加参数方法
showRefresh:true, //显示刷新
showColumns:true,//提供选择进行切换显示那些列
iconsPrefix:"fa", //定义是那一种类型的图标
sortName:"id", //默认排序的列
clickToSelect:true, //点击行选中 多选框或单选框
icons:{ //对应的图标样式
detailClose: "fa-minus",
columns:"fa-bars",
refresh:" fa-refresh",
detailOpen: "fa-plus"
},
detailFormatter:detailFormatter, //显示详情的方法
columns: [{checkbox:true},{
field: 'id',
align:"center",
title: '申请编号',
sortable:true, //是否允许排序
order:"asc", //默认排序
visible:true //是否具有收起效果
},{
field: 'userId.id',
align:"center",
title: '用户编号',
visible:false
},{
field: 'userId.loginName',
align:"center",
title: '申请人',
visible:true
}, {
field: 'instance',
align:"center",
visible:true,
title: '实例'
}, {
field: 'io',
align:"center",
title: 'I/O 优化',
visible:true
}, {
field: 'specifications',
align:"center",
visible:true,
formatter:function(value, row, index){
value = '<div class="my-text-overflow">'+value+'</div>';
return value;
},
title: '规格'
}, {
field: 'broadband',
align:"center",
visible:true,
sortable:true,
order:"asc",
title: '宽带'
}, {
field: 'mirror',
align:"center",
visible:true,
title: '镜像'
}, {
field: 'disk',
align:"center",
visible:true,
sortable:true,
order:"asc",
title: '磁盘Gib'
}, {
field: 'number',
align:"center",
visible:true,
title: '数量'
}, {
field: 'operate',
title: '操作',
align: 'center',
events:'operateEvents',
formatter: operateFormatter //最后一列显示内容
}],<
4000
br />
onClickRow:function(row,tr){
ids =row.id + "," + ids;
}
});
//查询参数
function queryParamsfun(params){
params['applyYesorNo'] = flag;
params['specifications'] = $("input[name='specifications']").val();
params['io'] = $("input[name='io']").val();
params['instance'] = $("input[name='instance']").val();
params['broadband']= $("input[name='broadband']").val();
params['mirror'] = $("input[name='mirror']").val();
params['disk'] = $("input[name='disk']").val();
params['number'] = $("input[name='number']").val();
params['applyParameter'] = $("#seachApplyLucenu").val();
return params;
}
//点击 + 图标 显示行详细记录
function detailFormatter(index, row) {
var html = [];
$.each(row, function (key, value) {
if(key == "invalid"){
return true;
}
if(key == "userId"){
key = "userName";
value = value.loginName;
}
html.push('<p><b class="col-lg-2">' + key + ':</b> <input type="text" value="' + value + '" disabled/></p>');
});
return html.join('');
}
//每行后面显示操作的列
function operateFormatter(value, row, index) {
if(flag == "已审批"){
return [
'<a class="remove" href="javascript:void(0)" title="删除">',
'<i class="fa fa-times fa-1x"></i>',
'</a>'
].join('');
}
return [
'<a class="like" href="javascript:void(0)" title="处理">',
'<i class="fa fa-pencil-square-o fa-1x"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="删除">',
'<i class="fa fa-times fa-1x"></i>',
'</a>'
].join('');
}
@RequestMapping("/findByAll")
@ResponseBody
public Object findByAll(Integer limit , Integer offset,final Apply apply,final String applyParameter,String order,String sort){
try {
/* Sort sorts = null;
if("asc".equals(order)){
sorts = new Sort(Sort.Direction.ASC,sort);
}else{
sorts = new Sort(Sort.Direction.DESC,sort);
}*/
apply.setApplyYesorNo("未审批");
List<Apply> findAll = applyDao.findAll(new Specification<Apply>() {
@Override
public Predicate toPredicate(Root<Apply> root, CriteriaQuery<?> query,
CriteriaBuilder cb) {
//path转化
List<Predicate> orPredicates = new ArrayList<Predicate>();
if(applyParameter != null && !("".equals(applyParameter.trim()))){
Join<Apply,User> user = root.join(root.getModel().//
getSingularAttribute("userId", User.class),javax.persistence.criteria.JoinType.LEFT);
Path<String> loginName = user.get("loginName");
Predicate LoginName =cb.like(loginName,"%"+applyParameter+"%");
orPredicates.add(LoginName);
}
//encapsulationSQL 此方法是自己封装的 和上面的if内容一制 ,只是属性不一样
orPredicates = encapsulationSQL(orPredicates, root, cb, apply);
Predicate p = cb.and(orPredicates.toArray(new Predicate[orPredicates.size()]));
query.where(p);
return null;
}
});
/*
ObjectMapper objectMapper = new ObjectMapper();
String str = objectMapper.writeValueAsString(findAll.getContent());
String strApply = JsonUtil.getJson(String.valueOf(findAll.getTotalElements()), str);*/
return findAll;
} catch (Exception e) {
e.printStackTrace();
}
return "";
}
$("#applyNoTable").bootstrapTable({
// url:"/apply/findByAll", //请求url
method: 'get', //服务的必须设置为get
detailView:true, //显示行详细信息
// sidePagination:'server',//设置为服务器端分页
idField:"id", //标识字段
pagination:true, //显示分页
toolbar:"#toolbar", // 工具栏
toolbarAlign:"left", //工具栏位置
queryParamsType:"limit", //请求附带其他参数必须设置为 limit
queryParams:queryParamsfun, //附加参数方法
showRefresh:true, //显示刷新
showColumns:true,//提供选择进行切换显示那些列
iconsPrefix:"fa", //定义是那一种类型的图标
sortName:"id", //默认排序的列
clickToSelect:true, //点击行选中 多选框或单选框
icons:{ //对应的图标样式
detailClose: "fa-minus",
columns:"fa-bars",
refresh:" fa-refresh",
detailOpen: "fa-plus"
},
detailFormatter:detailFormatter, //显示详情的方法
columns: [{checkbox:true},{
field: 'id',
align:"center",
title: '申请编号',
sortable:true, //是否允许排序
order:"asc", //默认排序
visible:true //是否具有收起效果
},{
field: 'userId.id',
align:"center",
title: '用户编号',
visible:false
},{
field: 'userId.loginName',
align:"center",
title: '申请人',
visible:true
}, {
field: 'instance',
align:"center",
visible:true,
title: '实例'
}, {
field: 'io',
align:"center",
title: 'I/O 优化',
visible:true
}, {
field: 'specifications',
align:"center",
visible:true,
formatter:function(value, row, index){
value = '<div class="my-text-overflow">'+value+'</div>';
return value;
},
title: '规格'
}, {
field: 'broadband',
align:"center",
visible:true,
sortable:true,
order:"asc",
title: '宽带'
}, {
field: 'mirror',
align:"center",
visible:true,
title: '镜像'
}, {
field: 'disk',
align:"center",
visible:true,
sortable:true,
order:"asc",
title: '磁盘Gib'
}, {
field: 'number',
align:"center",
visible:true,
title: '数量'
}, {
field: 'operate',
title: '操作',
align: 'center',
events:'operateEvents',
formatter: operateFormatter //最后一列显示内容
}],<
4000
br />
onClickRow:function(row,tr){
ids =row.id + "," + ids;
}
});
//查询参数
function queryParamsfun(params){
params['applyYesorNo'] = flag;
params['specifications'] = $("input[name='specifications']").val();
params['io'] = $("input[name='io']").val();
params['instance'] = $("input[name='instance']").val();
params['broadband']= $("input[name='broadband']").val();
params['mirror'] = $("input[name='mirror']").val();
params['disk'] = $("input[name='disk']").val();
params['number'] = $("input[name='number']").val();
params['applyParameter'] = $("#seachApplyLucenu").val();
return params;
}
//点击 + 图标 显示行详细记录
function detailFormatter(index, row) {
var html = [];
$.each(row, function (key, value) {
if(key == "invalid"){
return true;
}
if(key == "userId"){
key = "userName";
value = value.loginName;
}
html.push('<p><b class="col-lg-2">' + key + ':</b> <input type="text" value="' + value + '" disabled/></p>');
});
return html.join('');
}
//每行后面显示操作的列
function operateFormatter(value, row, index) {
if(flag == "已审批"){
return [
'<a class="remove" href="javascript:void(0)" title="删除">',
'<i class="fa fa-times fa-1x"></i>',
'</a>'
].join('');
}
return [
'<a class="like" href="javascript:void(0)" title="处理">',
'<i class="fa fa-pencil-square-o fa-1x"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="删除">',
'<i class="fa fa-times fa-1x"></i>',
'</a>'
].join('');
}
@RequestMapping("/findByAll")
@ResponseBody
public Object findByAll(Integer limit , Integer offset,final Apply apply,final String applyParameter,String order,String sort){
try {
/* Sort sorts = null;
if("asc".equals(order)){
sorts = new Sort(Sort.Direction.ASC,sort);
}else{
sorts = new Sort(Sort.Direction.DESC,sort);
}*/
apply.setApplyYesorNo("未审批");
List<Apply> findAll = applyDao.findAll(new Specification<Apply>() {
@Override
public Predicate toPredicate(Root<Apply> root, CriteriaQuery<?> query,
CriteriaBuilder cb) {
//path转化
List<Predicate> orPredicates = new ArrayList<Predicate>();
if(applyParameter != null && !("".equals(applyParameter.trim()))){
Join<Apply,User> user = root.join(root.getModel().//
getSingularAttribute("userId", User.class),javax.persistence.criteria.JoinType.LEFT);
Path<String> loginName = user.get("loginName");
Predicate LoginName =cb.like(loginName,"%"+applyParameter+"%");
orPredicates.add(LoginName);
}
//encapsulationSQL 此方法是自己封装的 和上面的if内容一制 ,只是属性不一样
orPredicates = encapsulationSQL(orPredicates, root, cb, apply);
Predicate p = cb.and(orPredicates.toArray(new Predicate[orPredicates.size()]));
query.where(p);
return null;
}
});
/*
ObjectMapper objectMapper = new ObjectMapper();
String str = objectMapper.writeValueAsString(findAll.getContent());
String strApply = JsonUtil.getJson(String.valueOf(findAll.getTotalElements()), str);*/
return findAll;
} catch (Exception e) {
e.printStackTrace();
}
return "";
}
相关文章推荐
- 百度地图与bootstrap样式不兼容的问题
- Bootstrap实现响应式导航栏效果
- Bootstrap导航栏各元素操作方法(表单、按钮、文本)
- bootstrap-wysiwyg中JS控件富文本的用法
- jeecg 3.5.2 新版本号4种首页风格 【经典风格,shortcut风格,ACE bootstrap风格,云桌面风格】
- Bootstrap实现自定义进度条
- Bootstrap CDN推荐
- MIT 6.828 JOS学习笔记2. Lab 1 Part 1.2: PC bootstrap
- 基于Bootstrap的后台通用模板
- bootstrap 带有确定取消按钮的modal
- UI-Bootstrap 模态对话框示例
- bootstrap-switch(开关插件)
- bootstrap的使用
- bootstrap-fileinput图片上传
- Bootstrap(4)之表格和表单
- bootstrap ace admin 整合java HTML5 全新高大尚后台框架
- bootstrap-glyphicons图标
- Bootstrap之3 栅格系统
- ServerBootStrap启动流程源码分析
- Bootstrap Manifest Generator(BMG) 生成的product.xml 试分析