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

来源:互联网 发布:53端口 转发 编辑:程序博客网 时间:2024/05/21 07:15

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();    }
0 0
原创粉丝点击