點擊到那一晚上的數據,咱們就使用範圍查詢javascript
Select * from jobs where ... limit 0,3css
咱們把全部數據查出來,放到內存中html
咱們建立一個分頁的工具類,前端
package cn.jiedada.util; import java.util.List; /**這是一個作分頁的分爲,當前頁,下一頁,上一頁,總頁數,尾頁,首頁,每一頁的大小, * 當前頁直接得到 * 算出總頁數 this.totalPage = this.totalNum%pageSize==0?this.totalNum/pageSize:this.totalNum/pageSize+1; 算出前一頁 this.prePage = this.localPage==1? 1 : this.localPage-1; 算出後一頁 this.nextPage = this.localPage==this.totalPage? this.totalPage : this.localPage+1; * @author * * @param <T> */ public class PageBeanUtil<T> { private Integer localPage; //總頁數 private Integer totalPage; //每頁顯示數量 private Integer pageSize = 5; //總數據量 private Integer totalNum; //首頁 private Integer firstPage = 1; //上一頁 private Integer prePage; //下一頁 private Integer nextPage; //尾頁 private Integer lastPage; //顯示的數據 private List<T> list; public PageBeanUtil() { } public PageBeanUtil(Integer localPage,Integer totalNum) { super(); this.localPage = localPage; this.totalNum = totalNum; //算出總頁數 this.totalPage = this.totalNum%pageSize==0?this.totalNum/pageSize:this.totalNum/pageSize+1; //算出前一頁 this.prePage = this.localPage==1? 1 : this.localPage-1; //算出後一頁 this.nextPage = this.localPage==this.totalPage? this.totalPage : this.localPage+1; this.lastPage = this.totalPage; } public Integer getLocalPage() { return localPage; } public void setLocalPage(Integer localPage) { this.localPage = localPage; } public Integer getTotalPage() { return totalPage; } public void setTotalPage(Integer totalPage) { this.totalPage = totalPage; } public Integer getPageSize() { return pageSize; } public void setPageSize(Integer pageSize) { this.pageSize = pageSize; } public Integer getTotalNum() { return totalNum; } public void setTotalNum(Integer totalNum) { this.totalNum = totalNum; } public Integer getFirstPage() { return firstPage; } public void setFirstPage(Integer firstPage) { this.firstPage = firstPage; } public Integer getPrePage() { return prePage; } public void setPrePage(Integer prePage) { this.prePage = prePage; } public Integer getNextPage() { return nextPage; } public void setNextPage(Integer nextPage) { this.nextPage = nextPage; } public Integer getLastPage() { return lastPage; } public void setLastPage(Integer lastPage) { this.lastPage = lastPage; } public List<T> getList() { return list; } public void setList(List<T> list) { this.list = list; } @Override public String toString() { return "PageBeanUtil [localPage=" + localPage + ", totalPage=" + totalPage + ", pageSize=" + pageSize + ", totalNum=" + totalNum + ", firstPage=" + firstPage + ", prePage=" + prePage + ", nextPage=" + nextPage + ", lastPage=" + lastPage + ", list=" + list + "]"; } }
經過這裏面的構造方法,就能直接封裝爲一個對象,這裏面都能經過計算得到,可是tolalNum是須要咱們去查詢數據庫的java
在service層中咱們作的語句爲jquery
@Override public PageBeanUtil<Jobs> page(Integer localPage) { //查詢中條數 Integer totalNum = dao.findNum(); if(localPage==null){ localPage=1; } //構造方法 PageBeanUtil<Jobs> pageBean = new PageBeanUtil<Jobs>(localPage, totalNum); //查詢 List<Jobs> list = dao.selectLimt((localPage-1)*pageBean.getPageSize(),pageBean.getPageSize()); pageBean.setList(list); return pageBean; }
@Override public Integer findNum() { return template.queryForObject("select count(id) from jobs", Integer.class); } @Override public List<Jobs> selectLimt(int index, Integer pageSize) { // TODO Auto-generated method stub return template.query("SELECT * FROM view_jobs_city LIMIT ?,?", new BeanPropertyRowMapper<Jobs>(Jobs.class),index,pageSize); }
這是dao層的git
<div class="container job-table"> <table class="table table-hover"> <tr> <th class="hidden-sm">編號</th> <th>工做職位</th> <th>地點</th> <th>人數</th> <th>薪資待遇</th> <th>是否啓用</th> <th>發佈時間</th> <th>操做</th> </tr> <c:forEach items="${pageBean.list }" var="j"> <tr> <th>#${j.id }</th> <th>${j.title }</th> <th>${j.cname }</th> <th>${j.jobnum }</th> <th>${j.treatment }</th> <th> <c:if test="${j.isenabled }" var="s"> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> </c:if> <c:if test="${!s }"> <span class="glyphicon glyphicon-remove" cia-hidden="true"></span> </c:if> </th> <th>${j.inputdate }</th> <th> <a href="system/jobs/update?id=${j.id }" class="btn-default tableA"><span class="glyphicon glyphicon-pencil" aria-hidden="true">修改</span></a> <a href="system/jobs/del?id=${j.id }" class="btn-default tableA"><span class="glyphicon glyphicon-trash" aria-hidden="true">刪除</span></a> </th> </tr> </c:forEach> </table> <!--分頁--> <nav class="navbar-right"> <ul class="pagination" id="paging"> <li> <span>當前第${pageBean.localPage }頁</span> </li> <li> <a href="system/jobs/page?localPage=1"> <span aria-hidden="true">首頁</span> </a> </li> <li> <a href="system/jobs/page?localPage=${pageBean.prePage }" aria-label="上一頁"> <span aria-hidden="true">上一頁</span> </a> </li> <li> </li> <li> <a href="system/jobs/page?localPage=${pageBean.nextPage }" aria-label="下一頁"> <span aria-hidden="true">下一頁</span> </a> </li> <li> <a href="system/jobs/page?localPage=${pageBean.lastPage }" aria-label="尾頁"> <span aria-hidden="true">尾頁</span> </a> </li> <li> <span>總頁數:共${pageBean.totalPage }頁</span> <span>總數據:共${pageBean.totalNum }條</span> </li> </ul> </nav> </div> </body>
這是前端頁面的數據反饋web
咱們輸入內容返回相應的數據,還要查看職位是否發佈spring
咱們能夠有4中狀況,這裏咱們怎麼處理sql語句呢?sql
作一個工具類,判斷咱們須要使用的sql
package cn.jiedada.util; /**爲了判斷傳入參數,改變sql語句,主要用於前端職位,是否全職查詢 * 的是否是 * getCondition經過該方法得到 * @author 傑大大是真滴帥 * */ public class JobsCondition { // 職位名稱 private String title; // 職位類型 // private Integer positiontype; public static String getCondition(String title,Integer positiontype) { //SELECT * FROM view_jobs_city where isenabled = 1 and title like '%會%' //這裏最好爲""由於後面拼接的時候能夠拼接多種,不要寫死了 String sql=" "; if(title!=null && !title.trim().equals("")){ sql +=" and title like '%"+title+"%' "; }if(positiontype!=null){ sql +=" and positiontype ="+positiontype+" "; } return sql; } public JobsCondition() { } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public Integer getPositiontype() { return positiontype; } public void setPositiontype(Integer positiontype) { this.positiontype = positiontype; } @Override public String toString() { return "JobsCondition [title=" + title + ", positiontype=" + positiontype + "]"; } }
控制層代碼
package cn.jiedada.controller.front; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import cn.jiedada.damain.Jobs; import cn.jiedada.service.IJobsService; import cn.jiedada.util.JobsCondition; import cn.jiedada.util.PageBeanUtil; @Controller @RequestMapping("/jobs") public class JobsController { @Autowired private IJobsService service; @RequestMapping("/page") public String type(Integer localPage,Model model,JobsCondition condition) { PageBeanUtil<Jobs> pageBean = service.page(localPage,condition); model.addAttribute("pageBean",pageBean); model.addAttribute("condition", condition); return "join_us_info"; } }
服務層的代碼
@Override public PageBeanUtil<Jobs> page(Integer localPage, JobsCondition condition) { String sql = JobsCondition.getCondition(condition.getTitle(), condition.getPositiontype()); Integer totalNum = dao.indeFindNum(sql); if(localPage==null){ localPage=1; } PageBeanUtil<Jobs> pageBean = new PageBeanUtil<Jobs>(localPage, totalNum); List<Jobs> list = dao.selectLimt((localPage-1)*pageBean.getPageSize(), pageBean.getPageSize(),sql); pageBean.setList(list); return pageBean; }
前端數據接收
<%@ page pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html> <head> <base href="${pageContext.request.contextPath }/"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面,任何其餘內容都*必須*跟隨其後! --> <title>源碼物流校招</title> <link rel="stylesheet" href="css/bootstrap-theme.min.css" /> <!--引入bootstrap樣式文檔--> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/commons.css" /> </head> <body> <!--導航條--> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <!-- 導航上Logo和目錄顯示 --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#index-navbar" aria-expanded="false"> <span class="sr-only">導航目錄</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="javascript:void(0);">源碼物流校園招聘網</a> </div> <!-- 導航上其餘按鈕--> <div class="collapse navbar-collapse navbar-right" id="index-navbar"> <ul class="nav navbar-nav"> <li> <a href="index.html">首頁</a> </li> <li> <a href="about.html">走進源碼</a> </li> <li> <a href="talents.html">人才發展</a> </li> <li> <a href="javascript:void(0);">職位列表</a> </li> <li> <a href="qa.html">Q&A</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <!--職位搜索--> <div class="container" style="border: 1px solid #dcdcdc;padding-top: 30px;padding-bottom: 30px;margin-top: 60px;"> <span> <img src="imgs/join_us_search.jpg" alt=""> </span> <div class="row" style="padding-top: 30px;"> <form class="form-inline" action="jobs/page"> <div class="form-group col-md-3"> <label for="jobTitle">職位名稱</label> <input type="text" class="form-control" name="title" value="${condition.title }" id="jobTitle" placeholder="職位名稱"> </div> <div class="form-group col-md-3" style="padding-top: 5px;"> <label for="workingTime">工做時間:</label> <label class="radio-inline"> <input type="radio" name="positiontype" id="workingTime" value="" <c:if test="${condition.positiontype==null }">checked="checked"</c:if>> 所有 </label> <label class="radio-inline"> <input type="radio" name="positiontype" id="workingTime" value="1" <c:if test="${condition.positiontype==1 }">checked="checked"</c:if> > 全職 </label> <label class="radio-inline"> <input type="radio" name="positiontype" id="workingTime" value="0" <c:if test="${condition.positiontype==0 }">checked="checked"</c:if> > 兼職 </label> </div> <button type="submit" class="btn btn-default">搜索職位</button> </form> </div> </div> <!--職位列表--> <div class="container job-table"> <span> <img src="imgs/index_title_zw.jpg" alt=""> <img src="imgs/index_title_more.jpg" alt=""> </span> <table class="table table-hover"> <c:forEach items="${pageBean.list }" var="j"> <tr> <th>#${j.id }</th> <th>${j.title }</th> <th>${j.cname }</th> <th>${j.jobnum }</th> <th>${j.treatment }</th> <th>${j.inputdate }</th> <th> <a href="freemakser/${j.htmlurl }">職位詳情</a> </th> </tr> </c:forEach> </table> <!--分頁--> <nav class="navbar-right"> <ul class="pagination" id="paging"> <li> <span>當前第${pageBean.localPage }頁</span> </li> <li> <a href="jobs/page?localPage=1"> <span aria-hidden="true">首頁</span> </a> </li> <li> <a href="javascript:go(${pageBean.prePage })" aria-label="上一頁"> <span aria-hidden="true">上一頁</span> </a> </li> <li> </li> <li> <a href="javascript:go(${pageBean.nextPage })" aria-label="下一頁"> <span aria-hidden="true">下一頁</span> </a> </li> <li> <a href="javascript:go(${pageBean.lastPage })" aria-label="尾頁"> <span aria-hidden="true">尾頁</span> </a> </li> <li> <span>總頁數:共${pageBean.totalPage }頁</span> <span>總數據:共${pageBean.totalNum }條</span> </li> </ul> </nav> </div> <!--友情連接 手機端的時候,就隱藏掉--> <div class="container hidden-xs hidden-sm" id="footer-link"> <img src="imgs/index_link_img.jpg" alt="" class="out-border-left"> <a href="" class="out-border-left">源碼時代官網</a> <a href="" class="out-border-left">BootStrap官網</a> </div> <!--底部--> <div class="container-fluid footer-common"> <p> <a href="javascript:void(0);" class="out-border-left">招聘首頁</a> <a href="about.html" class="out-border-left">走進源碼</a> <a href="talents.html" class="out-border-left">人才發展</a> <a href="join_us_info.html" class="out-border-left">職位列表</a> <a href="qa.html" class="out-border-left">Q&A</a> </p> <p>企業郵箱:test@test688.com </p> <p>電話熱線:4000-888-888 傳真:020-3333-3333</p> <p>公司地址:四川省成都市高新區府城大道西段399號天府新谷1號樓6F</p> <p>源碼物流版權全部 Copyright © 2018 jobs.digitalchina.ourats.com All rights reserved.蜀ICP備18080118號-1</p> </div> </body> <script type="text/javascript"> function go(localPage) { //傳入參數 var title='${condition.title }'; var positiontype='${condition.positiontype }'; window.location="${pageContext.request.contextPath }/jobs/page?localPage="+localPage+"&title="+title+"&positiontype="+positiontype+""; } </script> </html>