先上图:这个是正常查询没搜索分页之前
搜索后带分页的
效果图也看了,咱们上干货吧
首先分页得加一个工具类,里面有封装好的当前页,上一页,下一页等
public class PageUtil {
//页
private String page;
//每页数据量
private int pageSize;
//总数据数
private int count;
//当前页
private int currentPage;
//上一页
private int prevPage;
//下一页
private int nextPage;
//最后一页
private int lastPage;
//开始
private int startIndex;
//总页数
private int totalPage;
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public PageUtil(String page, int pageSize, int count){
this.page = page;
this.pageSize = pageSize;
this.count = count;
initCurrentPage();
initPrevPage();
initLastPage();
initNextPage();
initStartIndex();
initTotalPage();
}
private void initTotalPage(){
if(count%pageSize!=0){
this.totalPage = count/pageSize+1;
}else{
this.totalPage = count/pageSize;
}
}
//当前页
private void initCurrentPage(){
page = page == null ? "1" : page;
currentPage = Integer.parseInt(page);
}
//上一页
private void initPrevPage(){
if(currentPage == 1){
prevPage = 1;
}else{
prevPage = currentPage - 1;
}
}
//最后一页
private void initLastPage(){
lastPage = count / pageSize;
if(count % pageSize != 0){
lastPage += 1;
}
}
//下一页
private void initNextPage(){
if(currentPage == lastPage){
nextPage = currentPage;
}else{
nextPage = currentPage + 1;
}
}
private void initStartIndex() {
startIndex = (currentPage - 1) * pageSize;
}
public String getPage() {
return page;
}
public int getPageSize() {
return pageSize;
}
public int getCount() {
return count;
}
public int getCurrentPage() {
return currentPage;
}
public int getPrevPage() {
return prevPage;
}
public int getNextPage() {
return nextPage;
}
public int getLastPage() {
return lastPage;
}
public int getStartIndex() {
return startIndex;
}
}
现在进入正题,这是列表页面
<body style="background:#E8EBEE; overflow-x:hidden;">
<!--------------------------导航 start----------------------------->
<div class="row pt20 pb20">
<div class="col-lg-12">
<ol class="breadcrumb">
<li class="active"><span>商品管理</span></li>
</ol>
</div>
</div>
<!--------------------------导航 end------------------------------->
<!--------------------------筛选条件 start-------------------------->
<div class="row pl15 pr15">
<div class="col-lg-12">
<div class="main-box">
<div class="main-box-body clearfix">
<form class="mt10 mb15" role="form">
<div class="mt15 pl10 fl" style="width:330px;">
<label class="label_css pt8 pr5 fl">商品名称</label>
<input type="text" class="form-control fl" id="content" value="${map.content }" style="width: 220px"/>
</div>
<div class="mt15 pl10 fl" style="width:330px;">
<label class="label_css pt8 pr5 fl">药品批准文号</label>
<input type="text" class="form-control fl" id="approvalNumber" value="${map.approvalNumber }" style="width: 220px"/>
</div>
<div class="mt15 pl10 fl" style="width:330px;">
<label class="label_css pt8 pr5 fl">商品条形码</label>
<input type="text" class="form-control fl" id="barcode" value="${map.barcode }" style="width: 220px"/>
</div>
<div class="form-group-select2 mt15 pl10 fl" style="width:330px;">
<label class="label_css pt8 pr5 fl">商品库存</label>
<select class="fl" style="width:220px" id="countNum">
<option value="">全部</option>
<option value="0">已售罄</option>
<option value="1">少于50</option>
<option value="2">少于100</option>
</select>
</div>
<div class="form-group-select2 mt15 pl10 fl" style="width:330px;">
<label class="label_css pt8 pr5 fl">商品平台</label>
<select class="fl" style="width:220px" id="saleType" name="saleType">
<option value="">全部</option>
<option value="1">自营</option>
<option value="2">商家</option>
</select>
</div>
<div class="mt15 pl10 fl" style="width:330px;">
<label class="label_css pt8 pr5 fl">品牌</label>
<input type="text" class="form-control fl" style="width: 220px;" id="brand" name="brand" value="${map.brand }"/>
</div>
<div class="mt15 pl10 fl" style="width:530px;">
<label class="label_css pt8 pr5 fl">价格</label>
<input type="text" class="form-control fl" style="width:200px" id="startPrice" value="${map.startPrice }" />
<label class="pt8 pl5 pr5 fl">至</label>
<input type="text" class="form-control fl" style="width:200px" id="endPrice" value="${map.endPrice }"/>
</div>
<div class="mt15 pl10 fl" style="width:450px;">
<label class="label_css pt8 pr5 fl">总销量</label>
<input type="text" class="form-control fl" style="width:160px" id="startSales" value="${map.startSales }"/>
<label class="pt8 pl5 pr5 fl">至</label>
<input type="text" class="form-control fl" style="width:160px" id="endSales" value="${map.endSales }"/>
</div>
<p class="width100 txtc mt10 lh30 fl">
<input type="button" value="搜索" class="btn btn-primary mt15"
style="width: 120px" onclick="search()">
</div>
</br>
</form>
</div>
</div>
</div>
</div>
<!--------------------------筛选条件 end---------------------------->
<!--------------------------列表 start----------------------------->
<div class="row pl15 pr15">
<div class="col-lg-12">
<div class="main-box clearfix">
<div class="tabs-wrapper">
<ul class="nav nav-tabs" id="nav">
<li class="act"><a href="#tab-a" data-toggle="tab" data-tab="0">全部商品</a></li>
<li class="act"><a href="#tab-a" data-toggle="tab" data-tab="1">已上架商品</a></li>
<li class="act"><a href="#tab-a" data-toggle="tab" data-tab="2">未上架商品</a></li>
<li class="act"><a href="#tab-a" data-toggle="tab" data-tab="4">已售罄商品</a></li>
<li class="act"><a href="#tab-a" data-toggle="tab" data-tab="3">已删除商品</a></li>
</ul>
<div class="tab-content" id="contentBox">
<div class="tab-pane fade active in" id="tab-a" >
<div class="box active">
<div class="row pl15 pr15" id="tableShow">
<div class="col-lg-12">
<div class="main-box clearfix">
<header class="main-box-header clearfix">
<div class="filter-block pull-left">
<a href="#" class="btn btn-success pull-left" onclick="shelvesAll()">
<i class="icon-arrow-up" ></i>上架
</a>
<a href="#" class="btn btn-danger pull-left" onclick="soldOutAll()">
<i class="icon-arrow-down" ></i>下架
</a>
<a href="#" class="btn btn-primary pull-right" onclick="deleteAll()">
<i class="icon-trash"></i>删除
</a>
</div>
<span class="pull-right f14 color9 pt20">共${page.count}条记录/${page.totalPage}页</span>
</header>
<div class="main-box-body clearfix">
<div class="table-responsive clearfix">
<table class="table table-hover">
<thead>
<tr>
<th style="width:5%;">
<div>
<input type="checkbox" id="qx" style="width:16px; height:16px; border:1px solid: #aaa; background:#FFF;">
</div>
</th>
<th style="width:23%;">名称</th>
<th style="width:10%;">发布时间</th>
<th style="width:10%;">库存</th>
<th style="width:10%;">总销量</th>
<th class="text-center" style="width:10%;">药品分类</th>
<th style="width:12%;">平台 / 状态</th>
<th class="text-center" style="width:20%;">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${productList }" var="product">
<tr>
<td>
<div>
<input type="checkbox" id="${product.id }" class="ids" value="${product.id }" name="test" style="width:16px; height:16px; border:1px solid: #aaa; background:#FFF;">
</div>
</td>
<td>
${product.content }
</td>
<td>
${product.createTime }
</td>
<td>
<c:if test="${product.countNum== '0' }" >已售罄</c:if>
<c:if test="${product.countNum!= '0' }" >${product.countNum}</c:if>
</td>
<td> ${product.sales }</td>
<td class="text-center">
<c:if test="${product.tagContent==null or product.tagContent=='' }">
其他(无标签)
</c:if>
<c:if test="${product.tagContent!=null or product.tagContent!='' }">
${product.tagContent }
</c:if>
</td>
<td>
<c:if test="${product.saleType==1 }" ><span class="label label-success">自营</span></c:if>
<c:if test="${product.saleType==2 }" ><span class="label label-success">商家</span></c:if>
<c:if test="${product.status==1 }" ><span class="label label-success">出售中</span></c:if>
<c:if test="${product.status==2 }" ><span class="label label-default">未上架</span></c:if>
<c:if test="${product.status==3 }" ><span class="label label-success">已删除</span></c:if>
<c:if test="${product.status==4 }" ><span class="label label-success">未出售</span></c:if>
</td>
<td class="text-center">
<a class="color6" href="#" onclick="productDetails('${product.id }')"><i class="icon-file-alt"></i> 详细信息</a>
<c:if test="${product.status==2 }">
<a class="color6" href="#" onclick="standUp('${product.id }')"><i class="icon-arrow-up green"></i> 上架</a>
</c:if>
<c:if test="${product.status==1 or product.status==4}">
<a class="color6" href="#" onclick="soldOut('${product.id }')"><i class="icon-arrow-down red"></i> 下架</a>
</c:if>
<c:if test="${product.status!=3 }">
<a class="color6" href="#" onclick="deleteProduct('${product.id }')"><i class="icon-trash"></i> 删除</a>
</c:if>
<a class="color6" href="#" data-toggle="modal" data-target="#myModal" onclick="guigeProduct('${product.groupNum }')"><i class="icon-tasks"></i> 规格</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<ul class="pagination pull-right pb15">
<c:if test="${page.count==0 }">
</c:if>
<c:if test="${page.count>0 and page.totalPage==1}">
<li><a href="#">当前页:${page.currentPage}</a></li>
</c:if>
<c:if test="${page.currentPage>1 and page.totalPage==2 }">
<li><a href="#" onclick="fenye(1)">首页</a></li>
<li><a href="#" onclick="fenye('${page.prevPage}')"><i class="fa fa-chevron-left"></i> 上一页</a></li>
<li><a href="#">当前页:${page.currentPage}</a></li>
</c:if>
<c:if test="${page.currentPage == page.totalPage and page.totalPage!=1 and page.totalPage > 2}">
<li><a href="#" onclick="fenye(1)">首页</a></li>
<li><a href="#" onclick="fenye('${page.prevPage}')"><i class="fa fa-chevron-left"></i> 上一页</a></li>
<li><a href="#">当前页:${page.currentPage}</a></li>
</c:if>
<c:if test="${page.currentPage>1 and page.totalPage>2 and page.currentPage != page.totalPage}">
<li><a href="#" onclick="fenye(1)">首页</a></li>
<li><a href="#" onclick="fenye('${page.prevPage}')"><i class="fa fa-chevron-left"></i> 上一页</a></li>
<li><a href="#">当前页:${page.currentPage}</a></li>
<li><a href="#" onclick="fenye('${page.nextPage}')">下一页 <i class="fa fa-chevron-right"></i></a></li>
<li><a href="#" onclick="fenye('${page.lastPage}')">最后一页</a></li>
</c:if>
<c:if test="${page.currentPage==1 and page.totalPage>1}">
<li><a href="#">当前页:${page.currentPage}</a></li>
<li><a href="#" onclick="fenye('${page.nextPage}')">下一页 <i class="fa fa-chevron-right"></i></a></li>
<li><a href="#" onclick="fenye('${page.lastPage}')">最后一页</a></li>
</c:if>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--------------------------列表 end------------------------------->
</body>
这个是js里面分页,查询传参,我这个查询得字段比较多,自己可以根据自己实际情况查询,分页后面也要把查询得字段拼接上。
/*
* 模糊查询
*/
function search() {
var content = $("#content").val();
var approvalNumber = $("#approvalNumber").val();
var barcode = $("#barcode").val();
var startPrice = $("#startPrice").val();
var endPrice = $("#endPrice").val();
var startTime = $("#startTime").val();
var endTime = $("#endTime").val();
var startSales = $("#startSales").val();
var endSales = $("#endSales").val();
var countNum = $("#countNum").val();
var saleType = $("#saleType").val();
var sort = $("#sort").val();
var symptom = $("#symptom").val();
var department = $("#department").val();
var place = $("#place").val();
var brand = $("#brand").val();
var status= '${map.status}';
var sSales=/^[0-9]*[1-9][0-9]*$/;
var eSales=/^[0-9]*[1-9][0-9]*$/;
if((sSales.test(startSales)&&sSales.test(endSales))||(startSales==""&&endSales=="")){
location.href = "/user/system/productMangerList?content="
+ content + "&approvalNumber=" + approvalNumber
+ "&barcode=" + barcode + "&startPrice="+startPrice+"&endPrice="+endPrice+"&startTime=" + startTime + "&endTime="
+ endTime+"&startSales=" + startSales+"&endSales="+endSales
+ "&countNum=" + countNum + "&saleType=" + saleType+"&brand="+brand+"&status="+status;
}else{
layer.alert("您输入的格式不正确,请输入大于0的正整数!!!!");
}
}
/*
* 分页
*/
function fenye(cpage) {
var status= '${map.status}';
var content = $("#content").val();
var approvalNumber = $("#approvalNumber").val();
var barcode = $("#barcode").val();
var startPrice = $("#startPrice").val();
var endPrice = $("#endPrice").val();
var startTime = $("#startTime").val();
var endTime = $("#endTime").val();
var startSales = $("#startSales").val();
var endSales = $("#endSales").val();
var countNum = $("#countNum").val();
var saleType = $("#saleType").val();
var sort = $("#sort").val();
var symptom = $("#symptom").val();
var department = $("#department").val();
var place = $("#place").val();
var brand = $("#brand").val();
location.href = "/user/system/productMangerList?cpage=" + cpage
+ "&content=" + content + "&approvalNumber=" + approvalNumber
+ "&barcode=" + barcode + "&startPrice="+startPrice+"&endPrice="+endPrice
+ "&startTime=" + startTime + "&endTime="
+ endTime+"&startSales=" + startSales+"&endSales="+endSales
+ "&countNum=" + countNum + "&saleType=" + saleType+"&brand="+brand+"&status="+status;
}
下一步我在看Controller控制层
/*
* 跳转商品管理主页面
*/
@RequestMapping(value = "productMangerList")
public String productMangerList(HttpServletRequest request,Model model, String status, String saleType,String content
,String approvalNumber,String barcode,String startPrice,String endPrice,
String startSales,String endSales,String countNum
,String sort,String symptom,String department,String place,String brand,String cpage) {
String type = (String) request.getSession().getAttribute("role");
if ("1".equals(type)) {
log.info("-------------------》商户---没该权限");
return "redirect:errorPower";
}else if ("2".equals(type)) {
log.info("-------------------》管理员专属权限---商品管理");
String requestURL = request.getRequestURL().toString();//获取链接路径
String mathodPath = requestURL.substring(requestURL.lastIndexOf("/")+1);//截取最后一个字段
List<MenuPath> querySjManager = userService.queryMenuPermission();
if (!"".equals(mathodPath)) {
for (MenuPath menu : querySjManager) {
if (mathodPath.equals(menu.getPurl())) {//判断是否有这个权限
log.info("由此权限,放过!!!!");
Map<String,Object> map = new HashMap<String,Object>();
map.put("request",request);
map.put("status", status);
map.put("saleType",saleType);
map.put("content", content);
map.put("approvalNumber", approvalNumber);
map.put("barcode", barcode);
map.put("startPrice",startPrice);
map.put("endPrice",endPrice);
map.put("startSales",startSales);
map.put("endSales",endSales);
map.put("countNum",countNum);
map.put("sort",sort);
map.put("symptom",symptom);
map.put("department",department);
map.put("place",place);
map.put("brand",brand);
int count = productService.getProductCount(map);
PageUtil page = new PageUtil(cpage, Page_SIZE, count);
map.put("page",page);
List<Product> productList = productService.queryProductList(map);
request.setAttribute("productList", productList);
request.setAttribute("page", page);
model.addAttribute("map", map);
return "product/productManage";
}
}
}
}
return "redirect:errorPower";
}
controller对应得接口
List<Product> queryProductList(Map<String, Object> map);//列表查询
int getProductCount(Map<String, Object> map);//分页
业务逻辑层
/**
* <p>Title:getProductCount </p>
* <p>Description: 计算每页商品的数量</p>
* <p>Copyright: Copyright (c) 2018</p>
* <p>Company: www.zhaoge.com</p>
* @author zhaowenjun
* @date
* @version 1.0 */
@Override
public int getProductCount(Map<String, Object> map) {
return productMapper.getProductCount(map);
}
/**
* <p>Title: queryProductList</p>
* <p>Description: </p>
* <p>Copyright: Copyright (c) 2018</p>
* <p>Company: www.zhaoge.com</p>
* @author zhaowenjun
* @date
* @version 1.0 */
@Override
public List<Product> queryProductList(Map<String, Object> map) {
return productMapper.queryProductList(map);
}
mapper接口层
List<Product> queryProductList(Map<String, Object> map);
int getProductCount(Map<String, Object> map);
mybatis配置:sql
<!--计算所有商品个数 -->
<select id="getProductCount" resultType="int">
select count(*) from
t_sys_product pr
WHERE
1=1
<if test="tenId != null and tenId!=''">
and pr.tenId = #{tenId}
</if>
<if test="type != null and type!=''">
and pr.saleType = #{type}
</if>
<if test="saleType != null and saleType!=''">
and pr.saleType = #{saleType}
</if>
<if test="content != null and content!=''">
and pr.content like concat('%',#{content},'%')
</if>
<if test="approvalNumber != null and approvalNumber!=''">
and pr.approvalNumber = #{approvalNumber}
</if>
<if test="barcode != null and barcode!=''">
and pr.barcode = #{barcode}
</if>
<if test="startSales != null and startSales!='' and endSales != null and endSales!=''">
and pr.sales between #{startSales} and #{endSales}
</if>
<if
test="startPrice != null and startPrice!='' and endPrice != null and endPrice!=''">
and pr.nowPrice between #{startPrice} and #{endPrice}
</if>
<if test="countNum!=null and countNum !='' and countNum ==0">
and pr.countNum = 0
</if>
<if test="countNum!=null and countNum !='' and countNum == 1">
and pr.countNum between 0 and 50
</if>
<if test="countNum!=null and countNum !='' and countNum == 2">
and pr.countNum between 0 and 100
</if>
<if test="status != null and status !='' and status!=0">
and pr.status = #{status}
</if>
<if test="brand != null and brand !=''">
and pr.brandName = #{brand}
</if>
</select>
<!--查询商品列表 -->
<select id="queryProductList" resultType="com.wandu.webmanagement.data.entity.product.Product"
parameterType="map">
SELECT
DISTINCT
pr.id,
pr.title,
pr.content,
pr.tagContent,
pr.tagId,
pr.saleType,
DATE_FORMAT(pr.createTime,'%Y-%m-%d %H:%i:%s') as createTime,
pr.sales,
pr.`status`,
pr.countNum,
pr.groupNum
FROM
t_sys_product pr
LEFT
JOIN t_wy_product_quick_sort qs ON qs.productId = pr.id
LEFT JOIN
t_wy_symptom_department_product sdp ON sdp.productId = pr.id
LEFT JOIN
t_wy_place_product pp ON pp.productId = pr.id
LEFT JOIN
t_wy_brand_product bp on bp.productId = pr.id
WHERE
1=1
<if test="tenId != null and tenId!=''">
and pr.tenId = #{tenId}
</if>
<if test="type != null and type!=''">
and pr.saleType = #{type}
</if>
<if test="saleType != null and saleType!=''">
and pr.saleType = #{saleType}
</if>
<if test="content != null and content!=''">
and pr.content like concat('%',#{content},'%')
</if>
<if test="approvalNumber != null and approvalNumber!=''">
and pr.approvalNumber = #{approvalNumber}
</if>
<if test="barcode != null and barcode!=''">
and pr.barcode = #{barcode}
</if>
<if test="startSales != null and startSales!='' and endSales != null and endSales!=''">
and pr.sales between #{startSales} and #{endSales}
</if>
<if test="startPrice != null and startPrice!='' and endPrice != null and endPrice!=''">
and pr.nowPrice between #{startPrice} and #{endPrice}
</if>
<if test="countNum!=null and countNum !='' and countNum ==0">
and pr.countNum = 0 and pr.status=4
</if>
<if test="countNum!=null and countNum !='' and countNum ==1">
and pr.countNum between 0 and 50
</if>
<if test="countNum!=null and countNum !='' and countNum == 2">
and pr.countNum between 0 and 100
</if>
<if test="status != null and status !='' and status!=0 and status!=4">
and pr.status = #{status}
</if>
<if test="status == 4">
and pr.status = #{status}
</if>
<if test="sort != null and sort !=''">
and qs.id = #{sort}
</if>
<if test="symptom != null and symptom !=''">
and sdp.id = #{symptom}
</if>
<if test="department != null and department!=''">
and sdp.id = #{department}
</if>
<if test="brand != null and brand !=''">
and pr.brandName = #{brand}
</if>
<if test="place != null and place !=''">
and pp.id = #{place}
</if>
ORDER BY pr.createTime
desc
limit #{page.startIndex},#{page.pageSize}
</select>
到此为止了