分页技术,小白也能看懂(从后台传json到前台解析显示)
来源:互联网 发布:淘宝代销怎么关联发货 编辑:程序博客网 时间:2024/06/05 09:56
这是一篇我在初学习过程中,遇到的动态数据分页显示的问题,前台采用Ajax传给后台,后台在访问数据库取出分页数据再转换为json格式传递给前台,前台再解析显示到表格中。在此写出我在做的过程中遇到的问题,可以让其他人少走弯路。
前台方面会用到分页的插件,这是传送地址,http://www.jq22.com/jquery-info15943,下载下来,这插件是没有数据交互的,我们要做的就是把数据从数据库取出来,转换成json再传给js。
然后开始,然后把下载下来的插件里面的文件都复制到项目里,就像这样
然后开始写后台代码,这个就是主要的后台处理数据并传json给前台。
public class index { //已知数据private int pageNum;//当前页private int pageSize;//每页显示的数据条数private int totalRecord;//总记录条数private int totalPage;//总页数/* * 开始索引,也就是我们在数据库中要从第几行数据开始拿,有了 * startIndex和pageSize,就知道了limit语句的两个数据, * 就能获得每页需要显示的数据了; */private int startIndex;private List<Logintimes> list;public index(int pageNum,int pageSize,int totalRecord){this.pageNum=pageNum;this.pageSize=pageSize;this.totalRecord=totalRecord;if(totalRecord%pageSize==0){this.totalPage=totalRecord/pageSize;}else{this.totalPage=totalRecord/pageSize+1;}this.startIndex=(pageNum-1)*pageSize;}public index() {// TODO Auto-generated constructor stub}public int getPageNum() {return pageNum;}public void setPageNum(int pageNum) {this.pageNum = pageNum;}public int getPageSize() {return pageSize;}public void setPageSize(int pageSize) {this.pageSize = pageSize;}public int getTotalRecord() {return totalRecord;}public void setTotalRecord(int totalRecord) {this.totalRecord = totalRecord;}public int getTotalPage() {return totalPage;}public void setTotalPage(int totalPage) {this.totalPage = totalPage;}public int getStartIndex() {return startIndex;}public void setStartIndex(int startIndex) {this.startIndex = startIndex;}public List<Logintimes> getList() {return list;}public void setList(List<Logintimes> list) {this.list = list;}}
这是index实体类,list存放的是从数据库得到的是分页数据集。
public String json() {String message="";loginMessageDaoImpl dao=new loginMessageDaoImpl();List<Logintimes> list=new ArrayList();index index;JSONArray array=new JSONArray();if(request.getParameter("pageNum")==null){index=new index(1,15,dao.allSize()); JsonConfig config = new JsonConfig(); config.setExcludes(new String[]{"person"});//除去person属性index.setList(dao.All(index.getStartIndex(), index.getPageSize()));array=JSONArray.fromObject(index,config);System.out.println("json:"+array.toString());request.setAttribute("index", index);message="success";}else{int pageNum=Integer.parseInt(request.getParameter("pageNum"));int totalRecord=Integer.parseInt(request.getParameter("totalRecord"));int totalPage=Integer.parseInt(request.getParameter("totalPage")); index=new index(pageNum,15,totalRecord); index.setList(dao.All(index.getStartIndex(), index.getPageSize())); JsonConfig config = new JsonConfig(); config.setExcludes(new String[]{"person"});//除去person属性 array=JSONArray.fromObject(index,config);System.out.println("json:"+array.toString());HttpServletResponse response = ServletActionContext.getResponse();response.setContentType("text/html;charset=UTF-8");message=null;try {response.getWriter().write(array.toString());} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}return message;}
这是前台调用的类。那个判断语句if(request.getParameter("pageNum")==null)是用来处理第一次进入页面时需要给页面传的得到的数据库的数据总记录条数。
JsonConfig config = new JsonConfig();config.setExcludes(new String[]{"person"});
你的表中如何含有外键,就需要写这两句,这两句的作用就是在转换json时除去这个外键属性,否则在转换的时候会报错。如果你的表中没有外键,就须吧这两句删除。
前台方面:
在paging.js里需要改动如下地方:
在handles方法需要添加两个参数,以及ajax的调用方法,url的地址改成你的地址,以及里面的参数信息都改成你的项目你的数据信息。并且在该js中调用handles的方法参数别忘记改。
function handles(pageIndex,totalRecord,totalPage) { lis.removeClass('sel-page').eq(pageIndex - 1).addClass('sel-page'); if (totalPages <= 5) { that.options.callback(pageIndex); return false; } if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth; if (pageIndex == 2 || pageIndex == 1) distance = 0; if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth; pageSelect.css('transform', 'translateX(' + (-distance) + 'px)'); pageIndex == 1 ? firstPage.attr('disabled', true) : firstPage.attr('disabled', false); pageIndex == 1 ? prePage.attr('disabled', true) : prePage.attr('disabled', false); pageIndex == totalPages ? lastPage.attr('disabled', true) : lastPage.attr('disabled', false); pageIndex == totalPages ? nextPage.attr('disabled', true) : nextPage.attr('disabled', false); that.options.callback(pageIndex); var xmlhttp; var url="test!json?pageNum="+pageIndex+"&totalRecord="+ totalRecord+"&totalPage="+totalPage; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var data=xmlhttp.responseText; var json=eval('{'+data+'}'); var list=json[0].list; $("#dataGridTableJson tbody").html(""); for(var Logintimes in list){ $("#dataGridTableJson tbody").append('<tr>' +'<td>'+list[Logintimes].id+'</td>' +'<td>'+list[Logintimes].logintime+'</td>' +'<td>'+list[Logintimes].ipmessage+'</td>' +'<td>'+list[Logintimes].loginip+'</td>' +'</tr>'); //alert(list[Logintimes].logintime); } } }; xmlhttp.open("POST", url, false); xmlhttp.send(); }这就是一个完整的分页技术,从前端到后台。哪里有问题的可以问。
阅读全文
0 0
- 分页技术,小白也能看懂(从后台传json到前台解析显示)
- 如何从后台传数据到前台显示
- 将APP从后台显示到前台
- json 后台传数据到前台
- json+easyUI后台传数据到前台
- AJAX - 前台传JSON到后台
- AJAX - 前台传JSON数组到后台
- SpringMVC中利用json从后台穿数据到前台
- 从后台返回消息到前台显示(持续更新)
- ajax从后台返回list类型到前台解析
- easy ui怎么把前台显示的dataGird中的所有数据序列化为json,返回到后台并解析
- 从servlet获得json数据Ajax解析到前台网页
- json或json数组从页面到后台的转化或从后台到前台的转换
- json 后台传list对象到前台js获取便利显示到下拉框,避免乱码(ssm)
- Json数据从后台传至前台的方法
- 玩转Web之Json(三)-----easy ui怎么把前台显示的dataGird中的所有数据序列化为json,返回到后台并解析
- 前台js获取到后台json数据,eval解析json后,日期(object)对象转换为date日期格式显示
- java 后台解析前台传json串双引号转义问题
- 范围
- 手机端自动播放网页背景音乐代码
- 我的第三天学习
- 队列及循环队列的基本操作
- 两年Java开发工作经验面试总结
- 分页技术,小白也能看懂(从后台传json到前台解析显示)
- 泛型dao+mysql数据库+增删改查
- 入门训练 Fibonacci数列
- PHP基本语法
- Oracle基础知识1 : 单表查询1
- Python-快速实现微信公众号自动回复(聊天机器人)
- C#通过SSH获取Linux下面文件夹中的所有文件
- 6174问题
- SpringBoot自我整理学习2(springboot集成Druid)