springMVC+JSP+jQuery做分頁查詢示例
阿新 • • 發佈：2018-11-19
單獨做一個分頁JSP，程式碼如下：
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <span id="pageId"> <a class="first">首頁</a> <a class="pre">上一頁</a> <a class="next">下一頁</a> <a class="last">尾頁</a> <a class="pageCount">總頁數(1)</a> <a class="pageCurrent">當前頁(1)</a> </span>
JSP頁面對應的js程式碼：
$(document).ready(function(){ $("#pageId").on('click', '.pre,.next,.first,.last',jumpToPage); }); //設定分頁 function setPagination(pageObject){ //1.初始化總頁數 $(".pageCount").html("總頁數("+pageObject.pageCount+")"); //2.初始化當前頁的頁碼 $(".pageCurrent").html("當前頁("+pageObject.pageCurrent+")"); //3.在pageId對應的物件上繫結總頁數 //data函式用於以key/value的方式在物件上繫結資料 $("#pageId").data("pageCount", pageObject.pageCount); //4.在pageId物件的物件上綁定當前頁面值 $("#pageId").data("pageCurrent",pageObject.pageCurrent); } //定義一個函式,通過此函式實現頁面的跳轉 function jumpToPage(){ //獲得點選物件上class屬性對應的值,根據此值 //判定具體點選的是哪個物件(例如上一頁,下一頁) var clazz=$(this).attr("class"); //獲得pageId物件上繫結的pageCurrent對應的值 var pageCurrent=$('#pageId').data("pageCurrent"); //獲得pageId物件上繫結的pageCount對應的值 var pageCount=$('#pageId').data("pageCount") //根據class屬性的值判斷點選的是否是上一頁 if(clazz=='pre'&&pageCurrent>1){ pageCurrent--; } //判斷點選的是否是下一頁 if(clazz=="next"&&pageCurrent<pageCount){ pageCurrent++; } //判斷點選的物件是否是首頁 if(clazz=="first"){ pageCurrent=1; } //判定點選的物件是否是尾頁 if(clazz=="last"){ pageCurrent=pageCount; } //重寫繫結pageCurrent的值, $('#pageId').data("pageCurrent",pageCurrent); //重新執行查詢操作(根據pageCurrent的值) doGetObjects(); }
對頁面做資料顯示的js
/*非同步(ajax)載入服務端資料*/ function doGetObjects(){ //1.定義訪問專案資訊的url var url="project/doFindPageObjects.do"; //2.獲取表單資料(查詢時用) var params=getQueryFormData(); //3.動態設定分頁頁碼資料 var pageCurrent=$('#pageId').data("pageCurrent"); if(!pageCurrent)pageCurrent=1; params.pageCurrent=pageCurrent; //4.發起非同步ajax請求{name:"",valid:"",pageCurrent:1} $.get(url,params,function(result){//result-->JsonResult-->{} debugger //console.log(result); if(result.state==1){ //設定當前頁資料 setTableBodyRows(result.data.list); //設定分頁資訊(setPagination方法在page.js中) //console.log(result.pageObject);//undefined setPagination(result.data.pageObject); }else{ alert(result.message); } });
java頁面物件程式碼如下：
package cn.tedu.ttms.common.web;
import java.io.Serializable;
/**封裝具體的分頁資訊*/
public class PageObject implements Serializable{
private static final long serialVersionUID = -8753809986545361268L;
/**當前頁*/
private int pageCurrent=1;
/**每頁最多能顯示的記錄數*/
private int pageSize=2;
/**總記錄數*/
private int rowCount;
/**上一頁的最後一條記錄位置
* 對應:limit startIndex,pageSize;
*/
private int startIndex;
public int getPageCurrent() {
return pageCurrent;
}
public void setPageCurrent(int pageCurrent) {
this.pageCurrent = pageCurrent;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getRowCount() {
return rowCount;
}
public void setRowCount(int rowCount) {
this.rowCount = rowCount;
}
/**計算總頁數*/
public int getPageCount() {//pageCount
int pages = rowCount/pageSize;
if(0 != rowCount%pageSize) {
pages +=1;
}
return pages;
}
public int getStartIndex() {
return startIndex;
}
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
}
controller中的程式碼：
@RequestMapping("doFindPageObjects")
@ResponseBody
public JsonResult doFindPageObjects(
String name,
Integer valid,
Integer pageCurrent){
//state
//message
//data
Map<String,Object> map=projectService
.findPageObjects(name,valid,pageCurrent);
return new JsonResult(map);service中的程式碼：
@Override
public Map<String, Object> findPageObjects(
String name,
Integer valid,
Integer pageCurrent) {
//1.驗證引數的有效性
if(pageCurrent==null||pageCurrent<1)
throw new ServiceException("引數值無效,pageCurrent="+pageCurrent);
//2.獲取當前頁資料
//2.1 計算startIndex的值
int pageSize=2;
int startIndex=(pageCurrent-1)*pageSize;
//2.2 根據startIndex的值獲取當前頁資料
List<Project> list=
projectDao.findPageObjects(
name,
valid,
startIndex,
pageSize,
"createdTime");
//3.獲取總記錄數(根據此值計算總頁數)
int rowCount=
projectDao.getRowCount(name,valid);
PageObject pageObject=new PageObject();
pageObject.setRowCount(rowCount);
pageObject.setPageSize(pageSize);
pageObject.setPageCurrent(pageCurrent);
pageObject.setStartIndex(startIndex);//可選
//4.封裝查詢和計算結果到map物件
//1)HashMap底層結構?(陣列+連結串列+紅黑樹)-->JDK1.8
//2)HashMap是否執行緒安全?(不安全,多執行緒併發訪問)
//3)HashMap是否能保證新增元素的有序性(不能,
//假如希望保證有序性可以選擇LinkedHashMap)?
//4)HashMap在併發場景下如何使用?(將其轉換為同步集合或者
//直接使用ConcurrentHashMap)
Map<String,Object> map=
new HashMap<String,Object>();
map.put("list", list);
map.put("pageObject",pageObject);
return map;
}dao層：
List<Project> findPageObjects(
@Param("name")String name,
@Param("valid")Integer valid,
@Param("startIndex")int startIndex,
@Param("pageSize")int pageSize,
@Param("orderBy")String orderBy);
/**獲取表中記錄的總行數,我們要根據這個結果計算總頁數*/
int getRowCount(
@Param("name")String name,
@Param("valid")Integer valid);mysql中的mapper：
<select id="findPageObjects"
resultType="project">
select *
from tms_projects
<include refid="queryWhereId"/>
order by ${orderBy} desc
limit #{startIndex},#{pageSize}
</select>
<!-- resultType後的int是否可以修改為integer,
這個integer是否可以大寫. -->
<select id="getRowCount"
resultType="int">
select count(*)
from tms_projects
<include refid="queryWhereId"/>
</select>oracle中mapper：
<select id="findPage" resultType="Supplier">
select * from(
select a.*,ROWNUM RN
from(
select *
from supplier) a
where ROWNUM <= #{endIndex}
)
where RN > #{startIndex}
</select>
<select id="getRowCount" resultType="int">
select count(*)
from supplier
</select>程式碼簡單易懂適合新手學習，可以根據自己需求以做改動。