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

最新推荐文章于 2025-05-23 15:05:35 发布

Chauncy1995

最新推荐文章于 2025-05-23 15:05:35 发布

阅读量7.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaweb 文章标签：分页插件

本文链接：https://blog.youkuaiyun.com/Chauncymaster/article/details/71272663

javaweb 专栏收录该内容

3 篇文章

订阅专栏

本文记录了在学习过程中如何利用分页插件进行Ajax请求的后台数据分页。首先介绍了插件的下载及导入项目的方法，然后讲解了Servlet如何返回JSON格式的分页数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

    }