目录
css和js的引入
bootstrap中文网的链接: link https://www.bootcss.com/
bootstrap-table中文网的链接: link https://www.bootstrap-table.com.cn/index.html
css引入
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
//这是网页模板的引入 先引入bootstrap_css在引入bootstrap-table_css
css一般在< head>< /head>和< body></ body>之间引入
js引入
<script type="text/javascript" src="../../font/js/jquery-3.6.0.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>
//jquery一定要在bootstrap和bootstrap-table之前引入，因为他俩基于jquery
//bootstrap-table-zh-CN 中文解析
//这里只有jquery的引入不是网页版
js一般在< body></ body>之后引入，一般放在页面最后
bootstrap-table模板(template)-返回表格
$(function(){
$('#table1').bootstrapTable({
url: '/Master/getCheck', //后台接口
method: 'post',
contentType:"application/x-www-form-urlencoded",//method为post时必须加上这个,否则接收不到参数 后台返回Map格式或者json格式都可以用application/x-www-form-urlencoded
dataType: 'json',
//queryParams这个方法可以和后台交互
queryParams:function queryParams(params) { //设置查询参数
var param = {
pageSize: params.limit, //每页多少条数据
pageNumber: params.offset, //从第几条数据开始
phone : $.trim($("#phone").val()),//可以返回后台
name : $.trim($("#name").val()),
};
//console.log("pageSize="+params.limit+"pageNumber="+params.offset);
return param;
},
/* onSearch:function (text){
alert(text);
},*/
/* customSearch:function(){
alert("customSearch");
},*/
height: 560,
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
pagination: true, //是否显示分页（*）
maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（*）
pageList: [2,5, 10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true, //设置为 true启用 全匹配搜索，否则为模糊搜索
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "id", //每一行的唯一标识，一般为主键列\
sortStable: true,
columns: [
{checkbox: true},
{field: 'id', title: '工号',align: 'center'},
{field: 'name', title: '姓名',align: 'center'},
{field: 'sex', title: '性别',align: 'center'},
{field: 'age', title: '年龄',align: 'center'},
{field: 'phone', title: '手机号',align: 'center'},
{field: 'account', title: '账号',align: 'center'},
{field: 'address', title: '位置',align: 'center'},
{
field: 'status',
title: '状态',
/**
* formatter 列函数 表示对当前列的数据进行格式化的操作
* @param value 表示当前单元格中的值
* @param row 表示当前行
* @param index 表示当前行的下表
*/
formatter:function (value,row,index) {
console.log(value);
if(value==1){
status="空闲";
}else if(value==0){
status="请假";
}else if(value==2){
status="休息";
}
return status;
}
},
{
field: 'operator',
title: '操作',
align: 'center',
sortable: true,
width:'10%',
formatter: function (value, row, index) {
return '<a href="#" data-target="#updateForm"data-toggle="modal" title="修改">' +
'<i class="glyphicon glyphicon-pencil"></i>' +
'</a>'+
'<a href="javascript:void(0)" title="删除">' +
'<i class="glyphicon glyphicon-trash text-danger"></i>' +
'</a>';
},
events: {
'click a[title=删除]': function (e, value, row, index) {
//可以设置'删除的'的单击事件
},
'click a[title=修改]': function (e, value, row, index) {
//可以设置'修改'的单击事件
},
}
}
]
});
})
后端
controller
@RequestMapping("/getPageResultOrders")
@ResponseBody
public Map<String,Object> getPageResultOrders(Integer pageNumber, Integer pageSize, Orders c, HttpServletRequest req, HttpServletResponse resp) throws UnsupportedEncodingException, NoSuchAlgorithmException {
pageNumber= (pageNumber/pageSize)+1;
PageResult ordersCheck = ordersService.getPageResultOrders(pageNumber,pageSize,c);
/*c.setPhone(req.getParameter("phone"));
c.setName(req.getParameter("name"));*/
//System.out.println(c.getPhone()+" "+c.getName());
List<Orders> list = ordersCheck.getRows();
for (Orders m:list ) {
String addresss = LngAndLatUtil.getLngAndLat(m.getLng(), m.getLat());
m.setComAddress(addresss);
System.out.println( m.getComAddress());
}
Map<String, Object> map = new HashMap<>();
map.put("total",ordersCheck.getTotal());
map.put("rows",ordersCheck.getRows());
return map;
}
分页 Service
public PageResult getPageResultOrders(int pageNum, int pageSize, Orders o) {
PageHelper.startPage(pageNum,pageSize);
List<Orders> list = dao.getOrdersAll(o);
Page page =(Page) list;
PageResult pageResult = new PageResult(page.getPageNum(), page.getTotal(), page.getResult(), page.getPages());
return pageResult;
}
分页插件 pom.xml中的配置
<!--分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.2</version>
</dependency>
分页中sqlConfigMap.xml的配置
<plugins>
<!-- <!– 5.0之前配置方式
com.github.pagehelper 为 PageHelper 类所在包名
<plugin interceptor="com.github.pagehelper.PageHelper">
设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL 六种数据库
<property name="dialect" value="mysql"/>
</plugin>
–>
<!– 5.0之后配置方式 –>-->
<plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
</plugins>
<!--
在这里说一下mybits中sql日志的打印
-->
<settings>
<!-- 打印sql日志 -->
<setting name="logImpl" value="STDOUT_LOGGING" />
</settings>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
