利用分页插件对Ajax请求到后台数据进行分页

时间:2022-11-15 07:27:35

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

    }