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

随机推荐

C#高级特性_Attribute
Attribute: 公共语言运行时允许你添加类似关键字的描述声明,叫做attributes, 它对程序中的元素进行标注,如类型.字段.方法和属性等.Attributes和Microsoft .NET ...
屠龙之路_向恶龙Alpha进发_FirstDay
听说山的那边海的那边,出现了一头名为Alpha的恶龙,此龙无恶不作,还掠走了国王那漂酿的公主.少年很是气愤,大吼:"放开那女孩!!!",于是找到了志同道合的六位勇士,一起组成了屠龙 ...
RabbitMQ 路由选择 (Routing)
让日志接收者能够订阅部分消息.例如,我们可以仅仅将致命的错误写入日志文件,然而仍然在控制面板上打印出所有的其他类型的日志消息. 1.绑定(Bindings) 在前面中我们已经使用过绑定.类似下面的代码 ...
网络流 poj 3308 最小割
t个样例 n*m的矩阵 L个伞兵给出每行每列装激光的花费伞兵的位置要求杀死所有伞兵总费用为这些费用的乘积求花费最小建图源点 -> 行 -> 列 -> 汇点 ...
wow.js使用方法
近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个wow.js可以达到要求,现在把使用方法做如下总结: wow.js演示地址 wow.js的github地址使用方法真是超简 ...
做WEB开发的时候，前端与后端我们应该要注意哪些细节，哪些容易出现的漏洞？
写这篇文章的时候,我和团队正在处理项目漏洞问题,发现这些都是细节但又容易在项目实现的过程中忽视的部分,鉴于此,我想总结下来,方便以后出现类似问题能及时得到解决. 1.任意文件上传漏洞. 描述:允许 ...
本篇文章： HTML DOM 对象
HTML DOM 对象本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法 ...
JAVA 一个或多个空格分割字符串
知识补充 String的split方法支持正则表达式: 正则表达式\s表示匹配任何空白字符,+表示匹配一次或多次. 有了以上补充知识,下面的内容就很好理解了. 一.待分割字符串待分割字符串为如下: ...
【BZOJ-4520】K远点对 KD-Tree + 堆
4520: [Cqoi2016]K远点对 Time Limit: 30 Sec Memory Limit: 512 MBSubmit: 490 Solved: 237[Submit][Status ...
hdu 5233 离散化
10^9的大数组显然开不了.所以也算比较裸的离散化了... 令pos[i].pp[j]表示从左到右第j个高度为i的树的位置 (pp是个vector,范围0..now-1) pos[i].num表示有几 ...

分页进阶--ajax+jquery+struts2

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

随机推荐

热门专题