分頁技術,小白也能看懂(從後臺傳json到前臺解析顯示)
阿新 • • 發佈：2019-02-02
這是一篇我在初學習過程中，遇到的動態資料分頁顯示的問題，前臺採用Ajax傳給後臺，後臺在訪問資料庫取出分頁資料再轉換為json格式傳遞給前臺，前臺再解析顯示到表格中。在此寫出我在做的過程中遇到的問題，可以讓其他人少走彎路。
前臺方面會用到分頁的外掛，這是傳送地址，http://www.jq22.com/jquery-info15943，下載下來，這外掛是沒有資料互動的，我們要做的就是把資料從資料庫取出來，轉換成json再傳給js。
然後開始，然後把下載下來的外掛裡面的檔案都複製到專案裡，就像這樣
然後開始寫後臺程式碼，這個就是主要的後臺處理資料並傳json給前臺。
public class index { //已知資料 private int pageNum;//當前頁 private int pageSize;//每頁顯示的資料條數 private int totalRecord;//總記錄條數 private int totalPage;//總頁數 /* * 開始索引，也就是我們在資料庫中要從第幾行資料開始拿，有了 * startIndex和pageSize,就知道了limit語句的兩個資料， * 就能獲得每頁需要顯示的資料了; */ private int startIndex; private List<Logintimes> list; public index(int pageNum,int pageSize,int totalRecord){ this.pageNum=pageNum; this.pageSize=pageSize; this.totalRecord=totalRecord; if(totalRecord%pageSize==0){ this.totalPage=totalRecord/pageSize; }else{ this.totalPage=totalRecord/pageSize+1; } this.startIndex=(pageNum-1)*pageSize; } public index() { // TODO Auto-generated constructor stub } public int getPageNum() { return pageNum; } public void setPageNum(int pageNum) { this.pageNum = pageNum; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getTotalRecord() { return totalRecord; } public void setTotalRecord(int totalRecord) { this.totalRecord = totalRecord; } public int getTotalPage() { return totalPage; } public void setTotalPage(int totalPage) { this.totalPage = totalPage; } public int getStartIndex() { return startIndex; } public void setStartIndex(int startIndex) { this.startIndex = startIndex; } public List<Logintimes> getList() { return list; } public void setList(List<Logintimes> list) { this.list = list; } }
這是index實體類，list存放的是從資料庫得到的是分頁資料集。
public String json() { String message=""; loginMessageDaoImpl dao=new loginMessageDaoImpl(); List<Logintimes> list=new ArrayList(); index index; JSONArray array=new JSONArray(); if(request.getParameter("pageNum")==null){ index=new index(1,15,dao.allSize()); JsonConfig config = new JsonConfig(); config.setExcludes(new String[]{"person"});//除去person屬性 index.setList(dao.All(index.getStartIndex(), index.getPageSize())); array=JSONArray.fromObject(index,config); System.out.println("json:"+array.toString()); request.setAttribute("index", index); message="success"; }else{ int pageNum=Integer.parseInt(request.getParameter("pageNum")); int totalRecord=Integer.parseInt(request.getParameter("totalRecord")); int totalPage=Integer.parseInt(request.getParameter("totalPage")); index=new index(pageNum,15,totalRecord); index.setList(dao.All(index.getStartIndex(), index.getPageSize())); JsonConfig config = new JsonConfig(); config.setExcludes(new String[]{"person"});//除去person屬性 array=JSONArray.fromObject(index,config); System.out.println("json:"+array.toString()); HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/html;charset=UTF-8"); message=null; try { response.getWriter().write(array.toString()); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } return message; }
這是前臺呼叫的類。那個判斷語句if(request.getParameter("pageNum")==null)是用來處理第一次進入頁面時需要給頁面傳的得到的資料庫的資料總記錄條數。
JsonConfig config = new JsonConfig();
config.setExcludes(new String[]{"person"});
你的表中如何含有外來鍵，就需要寫這兩句，這兩句的作用就是在轉換json時除去這個外來鍵屬性，否則在轉換的時候會報錯。如果你的表中沒有外來鍵，就須吧這兩句刪除。
前臺方面：
在paging.js裡需要改動如下地方：
在handles方法需要新增兩個引數，以及ajax的呼叫方法，url的地址改成你的地址，以及裡面的引數資訊都改成你的專案你的資料資訊。並且在該js中呼叫handles的方法引數別忘記改。
function handles(pageIndex,totalRecord,totalPage) {
lis.removeClass('sel-page').eq(pageIndex - 1).addClass('sel-page');
if (totalPages <= 5) {
that.options.callback(pageIndex);
return false;
}
if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth;
if (pageIndex == 2 || pageIndex == 1) distance = 0;
if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth;
pageSelect.css('transform', 'translateX(' + (-distance) + 'px)');
pageIndex == 1 ? firstPage.attr('disabled', true) : firstPage.attr('disabled', false);
pageIndex == 1 ? prePage.attr('disabled', true) : prePage.attr('disabled', false);
pageIndex == totalPages ? lastPage.attr('disabled', true) : lastPage.attr('disabled', false);
pageIndex == totalPages ? nextPage.attr('disabled', true) : nextPage.attr('disabled', false);
that.options.callback(pageIndex);
var xmlhttp;
var url="test!json?pageNum="+pageIndex+"&totalRecord="+ totalRecord+"&totalPage="+totalPage;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data=xmlhttp.responseText;
var json=eval('{'+data+'}');
var list=json[0].list;
$("#dataGridTableJson tbody").html("");
for(var Logintimes in list){
$("#dataGridTableJson tbody").append('<tr>'
+'<td>'+list[Logintimes].id+'</td>'
+'<td>'+list[Logintimes].logintime+'</td>'
+'<td>'+list[Logintimes].ipmessage+'</td>'
+'<td>'+list[Logintimes].loginip+'</td>'
+'</tr>');
//alert(list[Logintimes].logintime);
}
}
};
xmlhttp.open("POST", url, false);
xmlhttp.send();
}