分页进阶--ajax+jquery+struts2

　　按照上次的分页逻辑，分页查询的业务大概需要几个“零件”：1.当前页；2.总页数；3.跳转页。后端需要处理的是：按照传送过来请求的页码返回相应地数据，并且接受初始化参数的请求：总页码、第一页的数据。

　　使用ajax请求可以很轻易地和服务器交互，所需要的数据格式是json。json的好处是可以把大量的数据格式化成一条字符串，由前后端的程序进行解析并呈现内容。我把查询到的数据装入list，并用struts自带的工具转换成为json返回客户端。

　　前端程序如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/pager.js"></script>

</head>

<body>

    <div >

        <table id="content" border="1">

        </table>

    </div>

    <div id="guide">

        <!-- 只输入数字的输入框 -->

        <button id="prePage" type="button">上一页</button> 当前 第 <span id="current"></span> 页/共 <span id="total"></span> 页  跳转到<input id="jumpPage" size="5" type="text" onkeyup='this.value=this.value.replace(/\D/gi,"")'/> <button id="jumpBtn">跳转到</button>  <button id="nextPage" type="button">下一页</button>

    </div>

</body>

</html>

/*

 * To change this license header, choose License Headers in Project Properties.

 * To change this template file, choose Tools | Templates

 * and open the template in the editor.

 */

var totalPage;

var currentPage;

var userlist;

//初始化请求--将当前页和总页面初始化 和 list

$(document).ready(function(){

    $.get('Init','',function(results){

        $.each(results, function(key, val) {

             if(key === "current")

                 currentPage = results[key];

             else if(key === "total")

                 totalPage = results[key];

             else if(key == "list"){

                userlist=val;

             }

        });

        currentPage = parseInt(currentPage);

        totalPage = parseInt(totalPage);

        $("#current").text(currentPage);

        $("#total").text(totalPage);

        getUser(userlist);

        //console.log(currentPage);

        //console.log(totalPage);

    });

});

//上一页

$(document).ready(function(){

    $('#prePage').click(function(){

        if(currentPage == 1)

            alert("已至首页");

        else{

            currentPage = currentPage-1;

            var need=currentPage;

            $.get('Pager','need='+need,function(result){

                userlist = result['userList'];

                getUser(userlist);

                $('#current').text(need);

            });

            }

    });

});

//下一页

$(document).ready(function(){

    $('#nextPage').click(function(){

        if(currentPage == totalPage)

            alert("已至尾页");

        else{

            currentPage = currentPage+1;

            var need=currentPage;

            $.get('Pager','need='+need,function(result){

                userlist = result['userList'];

                getUser(userlist);

                //console.log(need);

                $('#current').text(need);

            });

        }

    });

});

//跳转页

$(document).ready(function(){

    $('#jumpBtn').click(function(){

        var toPage = $('#jumpPage').val();

        if(toPage != ""){

            toPage = parseInt(toPage);

            if(toPage <= totalPage && toPage >=1)

                $.get('Pager','need='+toPage,function(result){

                    userlist = result['userList'];

                    getUser(userlist);

                    //console.log(need);

                    $('#current').text(toPage);

                });

            else {

                alert("跳转页不合法!");

            }

        }

    });

});

//遍历list并生成table

function getUser(list){

    //先清空再添加

    var table = $('#content');

    table.html("");

    var thead = $("<tr></tr>");

    thead.appendTo(table);

    var tagName = $("<td>id</td>");

    tagName.appendTo(thead);

    tagName = $("<td>name</td>");

    tagName.appendTo(thead);

    tagName = $("<td>sex</td>");

    tagName.appendTo(thead);

    tagName = $("<td>age</td>");

    tagName.appendTo(thead);

    for(var k in list){

        var tr=$("<tr></tr>");

        tr.appendTo(table);

        var person = new Object();

        var td;

        person.id=userlist[k]['id'];

        person.name=userlist[k]['name'];

        person.sex=userlist[k]['sex'];

        person.age=userlist[k]['age'];

        td=$("<td>"+person.id+"</td>");

        td.appendTo(tr);

        td=$("<td>"+person.name+"</td>");

        td.appendTo(tr);

        td=$("<td>"+person.sex+"</td>");

        td.appendTo(tr);

        td=$("<td>"+person.age+"</td>");

        td.appendTo(tr);

        //console.log(person);

    }

}

　　后端逻辑为：

package ActionPackage;

import java.util.HashMap;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

import model.test_u;

import pagetest.PageService;

public class PageAction extends ActionSupport{

    private HashMap<String,Object> dataMap;

    private List<test_u> userList;

    public List<test_u> getUserList() {

        return userList;

    }

    public void setUserList(List<test_u> userList) {

        this.userList = userList;

    }

    private int size=10;

    public String Pager(){

        HttpServletRequest request = ServletActionContext.getRequest();

        int need = Integer.parseInt(request.getParameter("need"));

        System.out.println("need = "+need);

        PageService ps = new PageService();

        userList = ps.selectLimit((need-1)*size, size);

        return SUCCESS;

    }

    public String Init(){

        System.out.println("访问了！");

        PageService ps = new PageService();

        int total = ps.getConut()/10;

//        HttpServletResponse response = ServletActionContext.getResponse();

        dataMap = new HashMap<String,Object>();

        dataMap.put("current", 1);

        dataMap.put("total", total);

        List list = ps.selectLimit(1, size);

        dataMap.put("list", list);

//        String jsonString="{\"current\":1,\"totle\":12}";

//        try {

//            response.getWriter().print(jsonString);

//        } catch (IOException e) {

//            // TODO Auto-generated catch block

//            e.printStackTrace();

//        }

        return SUCCESS;

    }

    public HashMap<String, Object> getDataMap() {

        return dataMap;

    }

    public void setDataMap(HashMap<String, Object> dataMap) {

        this.dataMap = dataMap;

    }

}

　　模型层与DAO层与service层如上篇分页一样。

        <action name="Pager" class="ActionPackage.PageAction" method="Pager">

                <result type="json">

                <!-- 这里指定将被Struts2序列化的属性，该属性在action中必须有对应的getter方法 -->

                <param name="root1">userList</param>

            </result>

        </action>

        <action name="Init" class="ActionPackage.PageAction" method="Init">

             <result type="json">

                <!-- 这里指定将被Struts2序列化的属性，该属性在action中必须有对应的getter方法 -->

                <param name="root">dataMap</param>

            </result>

        </action>

　　主要难题：json对象的解析。因为前端代码不是很熟悉，查了很多资料，传回来的数据是Object Object类型的，其实用for循环加上k，v访问就ok了。最后记录动态表格生成的代码。

    var table = $('#content');

    table.html("");

    var thead = $("<tr></tr>");

    thead.appendTo(table);

    var tagName = $("<td>id</td>");

    tagName.appendTo(thead);

    tagName = $("<td>name</td>");

    tagName.appendTo(thead);

    tagName = $("<td>sex</td>");

    tagName.appendTo(thead);

    tagName = $("<td>age</td>");

    tagName.appendTo(thead);

　　效果图：

分页进阶--ajax+jquery+struts2的更多相关文章

Struts2+AJAX+JQuery 实现用户登入与注册功能。
要求必备知识 JAVA/Struts2,JS/JQuery,HTML/CSS基础语法. 开发环境 MyEclipse 10 演示地址演示地址预览截图(抬抬你的鼠标就可以看到演示地址哦): 关于U ...
Struts2+AJAX+JQuery 实现用户登入与注册功能
要求:必备知识:JAVA/Struts2,JS/JQuery,HTML/CSS基础语法:开发环境:MyEclipse 10 关于UI部分请查看下列链接,有详细制作步骤: 利用:before和:afte ...
js进阶 14 jquery的ajax有哪些函数和事件（多练）
js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...
js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化
js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化一.总结一句话总结:如果用ajax传递表单的数据,如果不进行表单的序列化,要一个参数一个参数的写,太麻烦,序列化的话,一句代 ...
js进阶 14-1 jquery的ajax系列中的load方法的作用是什么
js进阶 14-1 jquery的ajax系列中的load方法的作用是什么一.总结一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...
Ajax&jQuery教案总结
Ajax&jQuery教程总结目录第一章 Ajax入门 6 第1讲传统表单提交存在的问题 6 课程内容 6 1. 问题的引入 6 2. 问题的解决 6 参考进度(0.5课时) 7 第2讲 ...
MVC中处理表单提交的方式（Ajax+Jquery）
MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...
jPList – 实现灵活排序和分页功能的 jQuery 插件
jPList 是一个灵活的 jQuery 插件,可以用于任何 HTML 结构的排序,分页和筛选.它支持的数据源包括:PHP + MySQL,ASP.NET + SQL Server,PHP + SQL ...
Bootstrap 分页插件 ajax获取数据显示
Bootstrap 分页插件 ajax获取数据显示标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...

随机推荐

iOS 监听textfield的输入(转)
1:首先 [textField addTarget:self action:@selector(textFieldDidChange:) forControlEvents:UIControlEvent ...
oracle递归查询树的SQL语句
来自互联网 SELECT * FROM a_ParkingLot AWHERE A.REGIONID IN( SELECT r.ID FROM a_region r START WITH ...
RAP在centos上的部署
在centos7上部署RAP(非官方) 作者批注:该部署文档为网友贡献,仅供参考.war请参考主页README.md下载最新版本哟~~~ 感谢热情网友的Wiki整理!万分感谢! 系统: centos7 ...
ActiveMQ_监听器(四)
一.本文章包含的内容 1.列举了ActiveMQ中监听器的使用 2.spring+activemq方式 1 2 3 <!-- 消息监听容器(Queue),配置连接工厂,监听的队列是queue3, ...
jQ插件--时间线插件和拖拽API
这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接, 那个三角会滚动, 然后左侧的界面也会滚动: 实际的 ...
bounds的剖析
bounds的剖析: UIScrollView的常见属性: contentSize:滚动范围,内容的尺寸(CGSize) contentInset :内边距:内容的上左下右的边距(UIEdgeIn ...
Linux下安装与使用本地的perl模块
转自 http://www.cnblogs.com/xianghang123/archive/2012/08/23/2652806.html Linux下安装与使用本地的perl模块在使用Linux ...
AngularJs学习之一使用自定义的过滤器
script: 参数item是由AngularJs提供的,是应当被过滤的对象集合.而showComplete是我们传入的参数. {{item.action}} 用ng-model创造一个名为showC ...
hadoop报错：WARN mapred.JobClient: Error reading task outputNo route to host
解决方案: /etc/sysconfig/network/etc/hosts$hostname 这三处的主机名都要一样. 具体参考:http://blog.itpub.net/28254374/vie ...
Hadoop的RPC分析
一.基础知识原理 http://www.cnblogs.com/edisonchou/p/4285817.html,这个谢了一些rpc与hadoop的例子. 用到了java的动态代理,服务端实现一个 ...

分页进阶--ajax+jquery+struts2

分页进阶--ajax+jquery+struts2的更多相关文章

随机推荐

热门专题