旅游管理系统：项目信息分页显示、查询

#Day03-01 项目信息分页显示

##1.在ProjectDao中添加分页相关方法:

   List<Project> findPageObjects(
   @Param("startIndex") int startIndex,
   @Param("pageSize") int pageSize);
 //当dao中的方法参数多余1个时要使用@Param注解定义参数.
   int getRowCount();

##2.在ProjectMapper.xml文件中添加方法对应的id

   <select id="findPageObjects"
                resultType="cn.tedu.ttms.product.entity.Project">
      select *
      from tms_projects
      order by createdTime desc
      limit #{startIndex},#{pageSize}
   </select>

   <select id="getRowCount"
                resultType="int">
           select count(*) from tms_projects;
   </select>

##3.在ProjectService接口及实现类中添加分页查询方法

          Map<String,Object> findPageObjects(int pageCurrent){
          int pageSize=2;
          int startIndex=(pageCurrent-1)*pageSize;
          <!-- 获取当前页数据 -->
          List<Project> list=
          projectDao.findPageObjects(startIndex,pageSize);
         <!--  获取分页信息(总记录数,总页数,.....)  -->
          int rowCount=projectDao.getRowCount();
          int pageCount=rowCount/pageSize;
          if(rowCount%pageSize!=0){
              pageCount++;
          }
       <!--   封装分页信息(构建PageObject对象:VO:value object)
          将当前数据以及分页信息封装到map,然后返回.  -->
   }

##4.编写控制层方法并测试

   @RequestMapping("doGetPageObjects")
   @ResponseBody
   public Map<String,Object> doGetPageObjects(
             Integer pageCurrent){
            return projectService.findPageObjects(pageCurrent);
    }

##5.编写客户端的project_list.js,page.js

   project_list.js
   $(document).ready(function(){
       doGetObjects();
   })
   function doGetObjects(){
       var url="project/doGetPageObjects.do";
       var pageCurrent=$("#pageId").data("pageCurrent");
       if(!pageCurrent)pageCurrent=1;
       var params={"pageCurrent":pageCurrent};
       $.getJSON(url,params,function(result){
                setTableBodyRows(result.list);
                setPagination(result.pageObject);
       })
   };
   function setTableBodyRows(result){....}

   page.js

   $(document).ready(function(){
        $("#pageId").on("click",".pre,.next,.first,.last",jumpToPage)
   })
   function setPagination(pageObject){
        $(".pageCount").html("总页数("+pageObject.pageCount+")");
        $(".pageCurrent").html("当前页("+pageObject.pageCurrent+")");
        $("#pageId").data("pageCount",pageObject.pageCount);
        $("#pageId").data("pageCurrent",pageObject.pageCurrent);
   }
   function jumpToPage(){
         var cValue=$(this).attr("class");
         var pageCurrent=$("#pageId").data("pageCurrent");
         var pageCount=$("#pageId").data("pageCount");
         if(cValue=="pre"&&pageCurrent>1){
            pageCurrent--;
         }
         .......
         $("#pageId").data("pageCurrent",pageCurrent);
         doGetObjects();
   }

#查询项目信息

##1.ProjectDao

 /**
	  * @param name 查询时用户输入的项目名
	  * @param valid 查询时用户输入的状态
	  * @param startIndex 分页查询时的起始位置
	  * @param pageSize 每页最多显示多少条记录
	  * @return 当前页数据
	  */
	 List<Project> findPageObjects(
	   @Param("name")String name,
	   @Param("valid")Integer valid,
	   @Param("startIndex") int startIndex,
	   @Param("pageSize") int pageSize);
	 
	 /**
	  * @return 返回记录总数
	  */
	 int getRowCount(
		 @Param("name")String name,
		 @Param("valid")Integer valid);

##2.ProjectMapper

<!-- 通过sql标签定义一个语句,后续其他元素用到了
          可以通过include标签进行包含即可 -->
   <sql id="whereQuery">
      <where>
        <if test="name!=null and name!=''">
           name like concat("%",#{name},"%")
        </if>
        <if test="valid!=null">
           and valid=#{valid}
        </if>
      </where>
    </sql>
    <select id="findPageObjects"
           resultType="cn.tedu.ttms.product.entity.Project">
      select *
      from tms_projects
      <include refid="whereQuery"/>
      order by createdTime desc
      limit #{startIndex},#{pageSize}
   </select>
   <select id="getRowCount"
           resultType="int">
      select count(*)
      from tms_projects
      <include refid="whereQuery"/>
   </select>

##3.ProjectService及其实现类

/**
	  * @param pageCurrent 当前页
	  * @return 获取当前页数据及分页信息
	  */
	 Map<String,Object> 
	 findPageObjects(String name,
			 Integer valid,
			 int pageCurrent);

@Override
	public Map<String, Object> findPageObjects(
			String name,Integer valid,int pageCurrent) {
		int pageSize=2;
		int startIndex=(pageCurrent-1)*pageSize;
		//获取当前页数据
		List<Project> list=
		projectDao.findPageObjects(
				name,valid,startIndex,pageSize);
		//获取总记录数并封装分页信息
		int rowCount=
				projectDao.getRowCount(name,valid);
		PageObject pageObject=new PageObject();
		pageObject.setRowCount(rowCount);
		pageObject.setPageSize(pageSize);
		pageObject.setPageCurrent(pageCurrent);
		pageObject.setStartIndex(startIndex);
		//将当前页数据以及分页信息封装到map
		Map<String,Object>  map=
				new HashMap<String,Object>();
		map.put("list", list);
		map.put("pageObject", pageObject);
		return map;
	}

##4.ProjectController

@RequestMapping("doGetPageObjects")
	  @ResponseBody
	  public Map<String,Object> doGetPageObjects(
	    		  String name,
	    		  Integer valid,
	    		  Integer pageCurrent){
		  log.info("name="+name);//乱码
		  log.info("valid="+valid);
		  log.info("pageCurrent="+pageCurrent);
		  Map<String,Object> map=
		  projectService.findPageObjects(
				  name,valid,pageCurrent);
		  log.info("map="+map);
		  
		  return map;//map对象转换为json串的表示形式如下
		  /*{
		     "list":[{id:1,name:"环球游",...},{...}] 
		     "pageObject":{pageCurrent:1,pageCount:2,...}
		    }
		   */
	  }

##5.页面js

$(document).ready(function(){
	//在查询按钮上注册点击事件
	 $("#queryFormId")
	 .on("click",".btn-search",doQueryObjects)；
	 //页面加载完成执行数据的获取操作
	  doGetObjects();
})
/*点击查询按钮时执行此方法*/
function doQueryObjects(){
	//1.初始化当前页码数据
	$("#pageId").data("pageCurrent",1);
	//2.根据条件查询数据
	doGetObjects();
}
function doGetObjects(){
//	var url="project/doGetObjects.do";
	/*$.ajax({
		url:url,
		type:"get",
		dataType:"json",
		success:function(result){
		}
	});*/
	var url="project/doGetPageObjects.do"
	var pageCurrent = $("#pageId").data("pageCurrent");
	if(!pageCurrent){
		pageCurrent=1;
	} 
	var param={"pageCurrent":pageCurrent};
	param.projectName=$("#searchNameId").val();
	param.valid=$("#searchValidId").val();
	$.getJSON(url,param,function(result){
		console.log(result);//json对象
		//将数据显示在table的tbody位置
		setTableBodyRows(result.list);
		setPagination(result.pageObject);
	});
}
/*将数据填充在table对象的body中*/
function setTableBodyRows(data){//扩展作业
	 //1.获得tbody对象
	 var tBody=$("#tbodyId");
	 tBody.empty();
	 //2.迭代数据集result
	 //for(var i=0;i<result.length;i++){}
	 for(var i in data){
	 //2.1构建一个tr对象
	 var tr=$("<tr></tr>");
	 //2.2构建每行td对象(一行有多个)
	 //var td0=$("<td></td>");
	 //....
	 //2.3在td对象内容填充具体数据
	 //td0.append(result[id].id);
	 //....
	 var tds="<td><input type='checkbox' name='checkId' value='"+data[i].id+"'></td>"+
	         "<td>"+data[i].code+"</td>"+
	         "<td>"+data[i].name+"</td>"+
	         "<td>"+data[i].beginDate+"</td>"+
	         "<td>"+data[i].endDate+"</td>"+
	         "<td>"+(data[i].valid?"有效":"无效")+"</td>"+
	         "<td><input type='button'  class='btn btn-default' value='修改'/></td>";
	 //2.4将td添加到tr对象中(一行要放多个)
	 tr.append(tds);
	 //2.5将tr追加到tbody中
	 tBody.append(tr);
	 }
}