bootstrap table自定义查询实现
石正信
一： 前端代码html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>欢迎登陆</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="input-group" style="float:right;">
<input type="text" id="userId" style="width:200px;height:40px;" >
<span>
<button type="button" id="eventquery" class="btn btn-success" style="width:80px;">查找</button>
</span>
</div>
<table id="table_server" ></table>
</body>
</html>
二：table插件初始化js代码
//文档加载事件
$(document).ready(function() {
// 初始化表格
initTable();
});
function initTable() {
var t = $("#table_server").bootstrapTable({
url: 'http://localhost:8080/findAll',
method: 'get',
dataType: "json",
striped: true,//设置为 true 会有隔行变色效果
undefinedText: "空",//当数据为 undefined 时显示的字符
pagination: true, //分页
// paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
// showToggle: "true",//是否显示 切换试图（table/card）按钮
// showColumns: "true",//是否显示 内容列下拉框
pageNumber: 1,//如果设置了分页，首页页码
// showPaginationSwitch:true,//是否显示 数据条数选择框
pageSize: 5,//如果设置了分页，页面数据条数
pageList: [5, 10, 20, 40], //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
// singleSelect: false,//设置True 将禁止多选
search: false, //显示搜索框
data_local: "zh-US",//表格汉化
sidePagination: "server", //服务端处理分页
queryParams: queryParams,
//将返回的值赋值给table插件的属性
responseHandler:function(res){
console.info(res)
return{
"total":res.total,
"rows": res.records,
"page":res.current
}
},
idField: "id",//指定主键列
columns: [
{
title: '#',//表的列名
field: 'id',//json数据中rows数组中的属性名
align: 'center'//水平居中
},
{
title: '产品编号',
field: 'productId',
align: 'center'
},
{
title: '购买数量',
field: 'buyNum',
align: 'center'
},
{
title: '价格',
field: 'money',
align: 'center'
},
{
title: '收货人信息',
field: 'receiverinfo',//可以直接取到属性里面的属性，赞
align: 'center'
},
{
title: '支付状态',
field: 'payState',
align: 'center',
},
{
title: '订单时间',
field: 'orderTime',//可以直接取到属性里面的属性，赞
align: 'center'
},
{
title: '用户ID',
field: 'userId',
align: 'center',
},
{
title: '操作',
align: 'center',
formatter: function (value, records, index) {//自定义显示可以写标签哦~
// <a href="#" @click="deleteItem(orderInfo.id)" >注销</a>
return '<a href=javascript:deletebyid(' + records.id + ')>删除</a> ';
}
}
]
});
}
//分页查询参数，是以键值对的形式设置的
function queryParams(params) {
return {
userId: $('#userId').val(), // 请求时向服务端传递的参数
pageNum: params.offset, // SQL语句偏移量
pageSize: params.limit, // 每页显示数量
}
}
// 搜索按钮触发事件
$(function() {
$("#eventquery").click(function() {
$('#table_server').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
});
});
//点击删除按钮触发的事件
function deletebyid(id){
$.ajax({
"url":"http://localhost:8080/delete?id="+id,
"async" : true,
"type" : "GET",
"success":function (data) {
console.log(data)
alert("删除成功")
window.location.reload();
location
},
"error":function (res) {
console.log(res);
}
});
}
三 后端采用springboot+mybatisplus
1.创建controller，service，mapper以及实体类，因为采用的是mybatisplus所以和普通的采用mybatis创建的工程会有所差异，可自行百度springboot集成mybatisplus
2.springboot加载mybatisplus的分页插件
@MapperScan("cn.sanjin.springboot.mapper")
@Configuration
public class MybatisPlusConfig {
/**
* 分页插件
*/
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
paginationInterceptor.setDialectType("mysql");
return paginationInterceptor;
}
}
3.分页的逻辑实现
因为采用的是mybatisplus的分页插件所以后台逻辑实现非常方便简单
@Controller
public class PageController {
@Autowired
private OrderInfoMapper orderInfoMapper;
@RequestMapping("/findAll")
@ResponseBody
public Object findAll(Integer pageNum,Integer pageSize,String userId){
//pageNum是查询第几页，pageSize是每页的大小，userId是查询条件
Integer pageNumber = (pageNum + pageSize) / pageSize;
Page<OrderInfo> page = new Page<>(pageNumber, pageSize);
if (userId.isEmpty()) {//如果查询条件为空则进行全表查询
IPage<OrderInfo> emps = orderInfoMapper.selectPage(page, null);
return emps;
} else {//按查询条件进行查询，queryWrapper是进行条件封装的
IPage<OrderInfo> emps = orderInfoMapper.selectPage(page,
new QueryWrapper<OrderInfo>().eq("userId", userId));
return emps;
}
@RequestMapping("/delete")
@ResponseBody
public Integer deleteById(Integer id) {
// System.out.println(orderinfo.getId());
Integer result =orderInfoMapper.deleteById(id);
System.out.println(result);
return result;
}
}
注：以上借鉴了网上很多文章非常感谢他们，代码只是demo,仅供学习参考，第一次写博客，欢迎大家多多指教！！！
类似资料：