分页不使用框架的实现

来源:互联网 发布:linux内核0x8000 编辑:程序博客网 时间:2024/06/07 04:10
/**
* 库存批量修改上传列表展示
* @param model
* @param req
* @param page
* @param fileName
* @return
*/
@RequestMapping(value="productStockUploadFileList")
public String productStockUploadFileList(Model model, HttpServletRequest req,String pageNum,String fileName){
int pageSize = 20;//可以从前台传来单页条数,这里写死
int totalPage = 0;//总的页数,需要在后台计算并返回前台的四大参数之一
if (StringUtils.isEmpty(pageNum)) { //传入的页数可能是空,可能是第一次链接访问而非上一页下一页或者第几页的访问请求
pageNum ="1";  
}
List<Map<String,Object>> list = null;//返回的四大参数之一,直接定死为空,如果有符合的条数就去查询,否则可以直接返回null,提高性能
Map<String,Object> paramMap = new HashMap<String,Object>();
paramMap.put("fileName", fileName); //传入要查询的条件,先查条数,条数为0则不再查询,这里只需赋条数的条件
int stockFileListCount = productLocalService.getBatchUpdateStockFileCount(paramMap);
if (stockFileListCount>0) { //先查条数,条数<=0不再去库里查
Map<String,Object> paMap = new HashMap<String,Object>();
paMap.put("start", (Integer.parseInt(pageNum)-1)*pageSize); //传入要查询的参数,这里是mysql库,需要给第一个参数start,即从哪条数据之后一条开始查
paMap.put("pageSize", pageSize);
paMap.put("fileName", fileName);
list = productLocalService.getBatchUpdateStockFile(paMap);
}
totalPage = stockFileListCount%pageSize == 0? stockFileListCount/pageSize:(stockFileListCount/pageSize)+1; //更新总的页数
model.addAttribute("fileName", fileName);/**如果前台传入的参数比较多,可以直接把paMap塞到model里,在前台jstl里取,如model.addAttribute("map", paMap);${map.fileName}*/
model.addAttribute("pageNum", pageNum); //所有要返回到前台的数据,塞入model
model.addAttribute("totalPage", totalPage);
model.addAttribute("stockFileList", list);
return "product/stockUpload"; //返回页面
}




      这里的分页是没有框架实现的,基本需要自己来写,需要返回前台的有四大参数
      即pageNum(页数)、totalPage(总页数)、stockFileList(列表数据)、paramMap(参数)
      我们在后台需要对着四大参数进行填充并返回给前台进行展示


前台jsp页面进行展示,采用jstl标签展示:




<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%
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 charset="UTF-8">
<title>批量修改库存管理†页面</title>
<link href="${ctx}/assets/css/font-awesome.css" rel="stylesheet" />
<link href="${ctx}/assets/css/bootstrap.css" rel="stylesheet" />
<link href="${ctx}/css/common.css" rel="stylesheet" />
<link href="${ctx}/assets/css/checkbox3.min.css" rel="stylesheet">
<script src="${ctx}/lib/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="${ctx}/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx}/js/plugins/jquery-form.js" ></script>




</head>
<style type="text/css">
body {
background-color: rgb(237, 237, 237);
}
</style>
</head>
<style type="text/css">
body {
background-color: rgb(237, 237, 237);
}
.text-right{width: inherit;float: right;}
</style>
</head>
<body>
<div class="container" style="padding: 0px;">




<div class="nav_header">
<form name="searchForm" style="margin-top:13px;">
<div class="col-xs-7">
<label>名字:</label> <input type="text" class="textInput" id="fileName" style="margin-right:25%;" value="${fileName}" />
</div>
<input type="hidden" name="pageSize" value="20" /> 
<input type="hidden" name="pageNum" />
</form>
<div class="col-xs-2"></div>
<div class="col-xs-3 text-right">
   <input type="button" value="查询" class="button btn_select" onclick="selSet()" />
<input type="button" value="上传" class="button btn_select" onclick="uploadSet()" />
<input type="button" value="导出库存" class="button btn_select" onclick="exportStocks()" />
</div>
</div>




          <br /> <br />
        <div  class="con_table" >
             <table ellpadding="0" cellspacing="0" class="l-table-edit" border="1">
<tr class="tab_title">
     <td>上传文件Id</td>
     <td>上传文件名称</td>
     <td>上传人名</td>
     <td>上传时间</td>
     <td>是否已上传</td>
     <td>操作</td>
</tr>
<c:if test="${stockFileList.size()==0}">
<tr><td colspan="5">无数据</td></tr>
</c:if>
<c:forEach items="${stockFileList}" var="h">
<tr>
<td>${h.id}</td>
<td>${h.fileName}</td>
<td>${h.userName}</td>
   <td>${h.createDate}</td>
   <td>${h.isUpload}</td>
   <td>
      <input type="button" value="查看"  id="updateUser" onclick="fileShowById(${h.id});" class="button1 updateUser" />
  <input type="button" value="删除"  id="delUser" onclick="delFile(${h.id});" class="button1 delUser"/>
   </td>
</tr>
</c:forEach>
</table>
        </div>

<div class="fenye">
                <ul>
                   <li><span>当前页:${pageNum}    总页数:${totalPage}</span></li>
                   <li><a href="javascript:onclick=getIndexAppList(1)">首页</a></li>
                   <li><a href="javascript:onclick=getIndexAppList(${pageNum-1<=0?1:(pageNum-1)});">上一页</a></li>                                                                
                   <li><a href="javascript:onclick=getIndexAppList(${pageNum+1>totalPage?pageNum:(pageNum+1)})">下一页</a></li>                
                   <li><a href="javascript:onclick=getIndexAppList(${totalPage ==0?(totalPage+1):totalPage})">末页</a></li>
                </ul>
        </div>

        <input id="curPage" type="hidden" value="${pageNum}"/><!--直接输入跳转-->
</div>
<!--编辑弹出框-->
<div id="add" class="modal fade" aria-hidden="false" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title">
<strong id="modtitle">添加商品集</strong>
</h4>
</div>
<input type="hidden" value="" name="method" id="method">
<div class="modal-body">
<div class="row">
<div class="form-group col-md-12">
<form id="form1" name="form1" method="post"  enctype="multipart/form-data">
<table border="0" align="center">
 <tr>
  <td>文件名称:</td>
  <td>
   <input name="name" type="text" id="name" size="20" ></td>
 </tr>   
 <tr>
  <td>上传文件:</td>
  <td><input name="file" type="file" id="file" size="20" ></td>
 </tr>    
</table>

</div>




</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" onclick="addformsubmit();" class="btn btn-primary">保存</button>
</div>
</form>
</div>
</div>
</div>





<script type="text/javascript">
   var curPage=$("#curPage").val();
function getIndexAppList(page){
 curPage = page;
       
       window.location.href="${ctx}/product/productStockUploadFileList?pageNum="+curPage+"&fileName="+$("#fileName").val();
 
   }
   
function fileShowById(id){
window.location.href="${ctx}/product/fileStockContentById?id="+id;
}

function selSet(){
window.location.href="${ctx}/product/productStockUploadFileList?pageNum="+curPage+"&fileName="+$("#fileName").val();
}

function exportStocks(){
//var goodsName = $('input[name=goods_name]').val();
//goodsName = encodeURIComponent(encodeURIComponent(goodsName));
document.getElementById("exportFrame").src = '../product/exportStocks';
}

function uploadSet() {
   $('#add').modal({backdrop: 'static', keyboard: false});
   $('#add').modal('show');
   $('#add_set_name').val('');
}

function addformsubmit(){
  $("#form1").ajaxSubmit(mainoptionsFile);
}
 
var mainoptionsFile = {
beforeSubmit: checkinputeditFile,
success: callbackeditFile,
//url:window.parent.getUploadPath()+"/file/upload?data={header:{token:'', userId:'3',appVersion:'',pdaType:'',sysVersion:'',padModel:'',userRole:'7',userType:'3'},body:{picpath:'indexApp',width:'200',height:'300'}}", //?picpath=indexApp
//url:window.parent.getBasePath()+"Image/uploadImg.do?picpath=indexApp",
 url:"${ctx}/file/upload",
type: 'post',
dataType: 'json'
};




function  checkinputeditFile(){
var fileName = $("#file").val();
var fileInputName =  $("#name").val();
if(fileInputName==""){
alert("请输入文件名称!");
return false;
}
if(fileName==""){
alert("请上传文件!");
return false;
}
var end = fileName.substring(fileName.lastIndexOf(".")+1,fileName.length);
end = end.toLowerCase();
if( !(end=='xls' || end=='xlsx') )
{
window.parent.alert("上传文件格式错误!");
return false;
}
return true;
}
 
function callbackeditFile(data) {
var filepath = "";
if (data && data.header) {
var header = data.header;
var body = data.body;
if (header.respCode == 200) {
filepath = body.trueFilePath;
//var fileUrl=(window.parent.getDownloadPath()+'/'+filepath); 
var fileUrl=filepath;
$.ajax({
type:'post',
async:true,
url:'${ctx}/product/productStockUploadFile',
data:{"filePath":fileUrl,"fileName":$("#name").val()},
dataType:'json',
success:function(data){
    if(data.code == 200){
    alert("上传成功");
$('#add').modal('hide');
window.location.reload();
       }else{
       alert(data.msg);
       }

      } 
});

}
}   
   
}

//删除文件
function delFile(fileId){
if(confirm("确定要删除嘛!")){
$.ajax({
type:'post',
async:true,
url:'${ctx}/product/delUploadStockFile',
data:{"fileId":fileId},
dataType:'json',
success:function(data){
    if(data.code == 200){
    alert(data.msg);
window.location.reload();
    }else{
    alert(data.msg);
    }

      } 
});
}
}
</script>
<iframe id="exportFrame" name="exportFrame" width="0" height="0" />
</body>
</html>


mybatis的sql:


<select id="getBatchUpdateStockFileCount" parameterType="java.util.HashMap" resultType="int">
SELECT count(1) as countNum FROM (
SELECT 
 tpsf.id, 
 tpsf.create_date,
 tpsf.file_path,
 tpsf.user_id,
 t.login_name as userName, 
 (CASE WHEN tpsf.is_upload=0 THEN '否' ELSE '是' END) AS isUpload
 FROM T_PRODUCT_STOCK_FILE tpsf
 left join t_user t on tpsf.user_id=t.user_id
 where tpsf.is_delete = 0
 <if test="fileName!=null and fileName!=''">
 and tpsf.file_name like '%${fileName}%'
 </if> ) a
</select>
 
<select id="getBatchUpdateStockFile" parameterType="java.util.HashMap" resultType="java.util.HashMap">
SELECT 
 tpsf.id, 
 tpsf.create_date as createDate,
 tpsf.file_path,
 tpsf.user_id,
 tpsf.file_name as fileName,
 t.login_name as userName, 
 (CASE WHEN tpsf.is_upload=0 THEN '否' ELSE '是' END) AS isUpload
 FROM T_PRODUCT_STOCK_FILE tpsf
 left join t_user t on tpsf.user_id=t.user_id
 where tpsf.is_delete = 0
 <if test="fileName!=null and fileName!=''">
 and tpsf.file_name like '%${fileName}%'
 </if>
 order by tpsf.create_date desc
 limit #{start},#{pageSize}
</select>
       可以先写查询所有列表数据的sql,求总的条数可以把limit语句去掉,order语句也可以去掉,然后最外面直接括上count(1)即可,但查询的条件要一样,mysql最外面()后面要加别名,否则会报错。limit语句是对所有查出的数据进行的切割,要放在最后,先进行排序,否则报错。
0 0