利用分頁外掛對Ajax請求到後臺資料進行分頁
阿新 • • 發佈:2019-01-25
1.在學習過程中,積累和思考是必須的,所以我還是選擇用部落格一邊記錄一邊學習
一款簡單的分頁外掛下載地址:
解壓之後分別把.css檔案和.js檔案匯入相應的專案資料夾中,並且在頁面中進行路徑引入,確保無誤。
具體做法前臺: 分頁:` <table id="mytable"></table> <ul class="page" id="page"></ul>` 前臺通過Ajax傳輸資料給後臺` $.ajax({ url : "請求地址", type : "傳輸方式", data :"json資料" dataType:"json", success : function(data){ "id":"page",//顯示頁碼的元素 "data":data,//顯示資料 "maxshowpageitem":3,//最多顯示的頁碼個數 "pagelistcount":5,//每頁顯示資料個數 "callBack":function(result){ var myHtml=""; console.log(result)//測試取到的資料 for(var i=0;i<result.length;i++){ myHtml=<tr></tr> //迴圈資料追加到 myHtml } $("#mytable").html(cHtml)//add } }; page.init(data.length,1,options);執行分頁函式
}
`
Servlet通過JSON格式資料
<!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->
<dependency>
<groupId>com.googlecode.json-simple</groupId>
<artifactId>json-simple</artifactId>
<version>1.1.1</version>
</dependency>
@RequestMapping("URL")
@ResponseBody//ajax
public String showClasss(HttpServletRequest req){
//ajax傳輸的資料
String cname=req.getParameter("cname");
String ename=req.getParameter("ename");
List<StudentGrade> studentsGrade = ig.getStudentsGrade(cname, ename);
//JSONArray格式資料
JSONArray json = new JSONArray();
for (StudentGrade sg : studentsGrade) {
JSONObject jo = new JSONObject();
jo.put("sno",sg.getSno());
jo.put("sname",sg.getSname());
jo.put("cname",sg.getCname());
jo.put("ename",sg.getEname());
jo.put("score",sg.getScore());
json.add(jo);
}
return json.toString();
}