1. 程式人生 > >利用分頁外掛對Ajax請求到後臺資料進行分頁

利用分頁外掛對Ajax請求到後臺資料進行分頁

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(); }