分页进阶--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. 版本 ...

随机推荐

Spring学习进阶（三） Spring AOP
一.是什么AOP是Aspect Oriented Programing的简称,最初被译为“面向方面编程”:AOP通过横向抽取机制为无法通过纵向继承体系进行抽象的重复性代码提供了解决方案.比如事务的控制 ...
python基础--基本数据类型考试_day3
1.执行 Python 脚本的两种方式终端和交互模式法1:python helloword.py 法2:ps: 执行前需给预chmod 755 helloword.py (linux系统中)./h ...
isinstance
class Foo: pass obj = Foo() isinstance(obj,Foo) class Foo: pass obj = Foo() isinstance(obj ,Foo) pri ...
[oracle] 解决ORA-30036：无法按8扩展段（在还原表空间‘XXXX’中）
select * from dba_data_files awhere a.TABLESPACE_NAME='UNDOTBS' alter tablespace UNDOTBS add datafil ...
java中的数据结构 --- 集合
集合类在Java.util包中! 在java中常用的是Set,Map,和List. 容器和迭代器链表集映射
【BZOJ 1176】【Balkan 2007】Mokia
http://www.lydsy.com/JudgeOnline/problem.php?id=1176 整体二分的例题把每个询问拆成四个询问,整体二分里x坐标递增,按x坐标扫的时候用树状数组维护y ...
代理、通知、KVO的应用
实现下图效果,每点击一次cell的“加号”或者“减号”,就可以让“底部view”的总价进行对应的增加或者减少. 下图是实际运行效果图: 图(1) 因为“底部UIView”需要一直显示在底部.如果把底部 ...
watch监听 chechbox 全选
// 监控全选checkbox的状态 $scope.$watch('AllCheck', function (newValue, oldValue) { // 第一次不执行 if (newValue ...
Subversion详解
Subversion特性 1.版本化目录可以跟踪目录树的变更.文件和目录都是版本化的,SVS只能跟踪单个文件: 2.精确的文件跟踪可以对文件和目录进行增加.复制.改名,解决了同名而无关的文件 ...
linux 误删文件恢复
文档太给力了!误删了几个重要文件,抖抖嗦嗦偷偷恢复了,救了我!!! http://jingyan.baidu.com/article/2f9b480d6c2bcd41cb6cc223.html 注意: ...

分页进阶--ajax+jquery+struts2

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

随机推荐

热门专题