bootstrap查询加分页

最新推荐文章于 2023-09-20 17:32:32 发布

超小小小脑斧

最新推荐文章于 2023-09-20 17:32:32 发布

阅读量225

点赞数

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/hfbjdfndjkfdgkfdljg/article/details/80802160

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="<%=request.getContextPath() %>/js/jquery.min.js"></script>
<link href="<%=request.getContextPath() %>/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="<%=request.getContextPath() %>/bootstrap/js/bootstrap.js"></script>
<script src="<%=request.getContextPath() %>/bootstrap/js/bootstrap-table.js"></script>
<script src="<%=request.getContextPath() %>/js/table-export.js"></script>
<script src="<%=request.getContextPath() %>/js/tableExport.js"></script>
<script src="<%=request.getContextPath() %>/js/jquery.base64.js"></script>
<script src="<%=request.getContextPath() %>/js/main.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap-table-zh-CN.js"></script>

</head>

<style>

#DataGrid001_table th{

background-color:rgb(181, 219, 235);

}

</style>

function searchSelect(){

$('#DataGrid001_table').bootstrapTable('refreshOptions',{pageNumber:1});

//$("#DataGrid001_table").bootstrapTable('refresh',{offset1: 1});

//$('#DataGrid001_table').bootstrapTable('refresh');

}

</script>

<body style="overflow:auto;">
<div style="height:10px;margin-top:0px;">
<form id="formSearch" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-1" for="txt_search_departmentname">柜号</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="cabinetNo">
</div>
<label class="control-label col-sm-1" for="txt_search_statu">提单号</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="blno">
</div>
<div class="col-sm-4" style="text-align:left;">
<button type="button" id="btn_query" class="btn btn-primary" οnclick="searchSelect();">查询</button>
</div>
</div>
</form>
</div>
<table class="query_form_content" style="height:100%;width:100%;overflow:hidden;border-collapse: collapse;border-spacing:0px;table-layout:fixed;">
<tr>
<td colspan="2" style="border-style:none;width:100%;margin:0px;padding:0px;vertical-align: top;">
<table id="DataGrid001_table" style="width:100%;height:100%;">
</table>

<script>
$(document).ready(function(){
var invesInfoId = "${param.invesInfoId}"; //调查主键
$("#DataGrid001_table").bootstrapTable({
classes: 'table table-hover table-no-bordered',
method: "post",
contentType: "application/x-www-form-urlencoded",
url: "<%=request.getContextPath() %>/ShipprocrssController/Export1",
search: false,
clickToSelect: true,
sortable: false,
pagination:true,//是否分页
sidePagination:'server',//指定服务器端分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize:2,//单页记录数
pageList:[10,20,30,40], //分页步进值
queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
return {//这里的params是table提供的
offset: params.offset,//从数据库第几条记录开始查
limit: params.limit,//找多少条
cabinetNo:$('#cabinetNo').val(),
blno:$('#blno').val()
};
},
//showColumns:true,
//得到查询的参数
formatLoadingMessage: function() {
return '请稍等，正在加载中...';
},
formatNoMatches: function() {
return '无符合条件的记录';
},
columns: [
{
title:' ',
formatter: function (value, row, index) {
var pageSize = $("#DataGrid001_table").bootstrapTable('getOptions').pageSize;
var pageNumber = $("#DataGrid001_table").bootstrapTable('getOptions').pageNumber;
return pageSize * (pageNumber - 1) + index + 1;
}
},
{field:"id",title:'编号'},
{field:"blno",title:'提单号'},
{field:"cabinetNo",title:'柜号'},
{field:"cabinetType",title:'柜子型号'},
{field:"shipCompany",title:'船公司'},
{field:"shipName",title:'船名称'},
{field:"shipNo",title:'船号码'},
{field:"statrPart",title:'始发地'},
{field:"leavePortDateStr",title:'离港日期'},
{field:"termini",title:'目的地'},
{field:"predictArrivePortDateStr",title:'预计到达目的港日期'},
{field:"shipUnloadingDateStr",title:'卸船日期'},
{field:"predictArriveStorageDateStr",title:'预计到达仓库日期'},
{field:"arriveDateStr",title:'送达日期'},
{field:"emptyCabinetReturnDateStr",title:'还空柜日期'},
{field:"operator",title:'录入人'},
{field:"makedateStr",title:'录入时间'},
{field:"update_code",title:'修改人'},
{field:"updatedateStr",title:'修改时间'}

],
});
});
</script>
</tr>
</table>
</body>

</html>

java:

@RequestMapping(value = "/Export1", method = RequestMethod.POST)
public String Export1(HttpServletRequest req,
HttpServletResponse response,
Map<String, Object> map, @RequestParam("offset") int pagenow,
@RequestParam("limit") int rowss,ShipProcrss shipprocess) throws Exception{

response.setContentType("text/html;charset=utf-8");
req.setCharacterEncoding("utf-8");
Integer startnum =pagenow;// 开始记录
Map fff=new HashMap();
if(shipprocess!=null){
fff.put("ShipProcrss", shipprocess);
map.put("ShipProcrss", shipprocess);
}
Integer totalcount = ss.find(fff).size();// 总记录条数
map.put("startnum", startnum);
map.put("pagesize", rowss);
List<ShipProcrss> eList = ss.find(map);
JSONObject jsonobj = new JSONObject();
jsonobj.put("total", totalcount);
JSONArray json = JSONArray.fromObject(eList);
jsonobj.put("rows", json);
String ff = jsonobj.toString();
response.getWriter().print(ff);
return null;

}

bootstrap参考网址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

超小小小脑斧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap查询加分页

jsp：&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getSe...
复制链接

扫一扫

专栏目录