分页进阶--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-- 重要的链接
面试题: http://www.jianshu.com/p/6a57c6e902e8 富文本: http://www.cnblogs.com/jys509/p/5018027.html
Beta项目冲刺–第四天
考试太多,做项目的时间太少-- 队伍:F4 成员:031302301 毕容甲 031302302 蔡逸轩 031302430 肖阳 031302418 黄彦宁会议内容: 1.站立式会议照片: 2.项 ...
cxf和spring结合,发布restFull风格的服务
rest(Representational State Transfer):表现层状态转化,它是一种风格,用于资源定位,例如:http://ip:port/user/student/001 和资源操作 ...
【BZOJ 2599】【IOI 2011】Race 点分治
裸的点分治,然而我因为循环赋值$s$时把$i <= k$写成$i <= n$了,WA了好长时间 #include<cstdio> #include<cstring> ...
Spring Assert 断言
Assert(断言)的初步理解构思 Web 应用在接受表单提交的数据后都需要对其进行合法性检查,如果表单数据不合法,请求将被驳回.类似的,当我们在编写类的方法时,也常常需要对方法入参进行合法性检查, ...
Msyql-检测数据库版本
show variables like '%version%'; 数据库版本结果: "protocol_version","" "version&qu ...
4位组合型Excel文档密码怎么破解
现代社会我们会遇到各种密码,很多的密码我们一段时间不用就不知不觉的忘记了.很多的excel用户就遇到过这种情况,这个时候我们就需要一款Excel密码破解工具.Advanced Office Passw ...
iOS中如何选择delegate、通知、KVO（以及三者的区别）
转载自:http://blog.csdn.net/dqjyong/article/details/7685933 在开发IOS应用的时候,我们会经常遇到一个常见的问题:在不过分耦合的前提下,contr ...
C++ 合成默认构造函数的真相
对于C++默认构造函数,我曾经有两点误解: 类如果没有定义任何的构造函数,那么编译器(一定会!)将为类定义一个合成的默认构造函数. 合成默认构造函数会初始化类中所有的数据成员. 第一个误解来自于我学习 ...
sql中的xml使用
SQL openxml用法使用sp_xml_preparedocument处理XML文档(原文:http://www.cnblogs.com/oec2003/archive/2011/07/23/2 ...

分页进阶--ajax+jquery+struts2

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

随机推荐

热门专题