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

随机推荐

手把手windows64位配置安装python2.7
这几天公司要用到python的一些算法,让我调研一番,之前对Python一次没接触的我在安装配置环境的时候由于版本的问题,折腾了好久,这里简单介绍一下我的安装方法,需要安装pyhton的朋友可以不再向 ...
MyEclipse10安装SVN插件
一.下载SVN插件subclipse 下载地址:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 在打开的网 ...
IntelliJ IDEA 使用心得与常用快捷键
那种酸爽,根本说不出来—————————————————————————— by: Jimi没有BondJimi是谁? 就是洒家啊! 刚开始学习写Java的时候,用的eclipse,正式工作后,主 ...
【POJ 2503】Babelfish(字符串)
题给定字典,再询问. 字典与询问之间有一个空行. cin.peek()是一个指针指向当前字符. #include<iostream> #include<string> #in ...
【转】Handler学习笔记（一）
一.Handler的定义: Handler主要接收子线程发送的数据, 并用此数据配合主线程更新UI,用来跟UI主线程交互用.比如可以用handler发送一个message,然后在handler的线程中 ...
iOS的nil，Null，NSNull的使用
今天做项目时,在数组里面取值时,发现里面有NSNull的对象,然后用数组里面对应的对象赋值时出现各种问题,总是报错.后面经过研究和查资料,总算解决了这一问题. nil用来给对象赋值(Objective ...
表头不动，内容滚动的例子(纯css+html)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
【bzoj4241】历史研究
http://www.lydsy.com/JudgeOnline/problem.php?id=4241 (题目链接) 看到题目就联想到了[bzoj2809] Apio2012—dispatching ...
数论专项测试——约数个数和（lucas的数论）
#include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...
squid日志时间转换
squid日志时间是unix时间戳不利于观看 python脚本进行转换 #!/usr/bin/env python #2014-6-5 pdd import re import time impor ...

分页进阶--ajax+jquery+struts2

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

随机推荐

热门专题