json实现jsp分页实例介绍(附效果图)

2024-10-11 12:14:33

json 在上篇文章已有详细介绍，json的既简单易懂，又传输迅速。并且能和javascript很好的融为一体。
在不需要添加jar的前提下，能够很好完成jsp分页问题。
下面具体介绍分页实例：

效果如图所示，采用jsp+servlet技术
首先：编写一个javaBean User.java

代码如下:

package bean;
public class User {
private int id;
private String name;
private String password;
private int age;
public User() {
super();
}
public User(int id, String name, String password, int age) {
super();
this.id = id;
this.name = name;
this.password = password;
this.age = age;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
@Override
public String toString() {
//{'id':1,'name':'zhangsan','password':'123','age':1}
return "{'id':"+id+",'name':'"+name+"','password':'"+password+"','age':"+age+"}";
}

}

这里需要注意的就是 toString的方法的改变
然后：我们来编写它的control 层和Dao层
为了简化代码，便于取值，数据库暂写为一个集合
可以看到，
1.service 接收request请求得到页面所要展示当前页（为第page页）
2.创建一个字符串，向内依次添加从数据库DB 得到的user，并将所有数据封装

代码如下:

[{},{},{}]

3.将此字符串返回到请求页面

代码如下:

package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.LinkedList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import bean.User;
public class Paging extends HttpServlet {
public static final int PER_PAGE = 3;
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//分页数据源当前得到第几页的记录每页显示多少条
int page = Integer.parseInt(request.getParameter("page"));
// page = 1 i = 0
//page = 2 3
int length = 0;//记录当前拿了多少条
StringBuffer sb = new StringBuffer();
sb.append("[");
//[{},{},{}]
String message = null;
if(page >= 1 && page <= 3){
for (int i = (page-1)*PER_PAGE; i < DB.list.size()&&length < PER_PAGE; i++) {
User u = DB.list.get(i);
sb.append(u.toString()+",");
length++;
}
if(length > 0){
message = sb.substring(0, sb.length()-1)+"]";
}else{
message = sb.toString()+"]";
}
}else{
response.setContentType("text/html;charset=utf-8");
response.getWriter().println("捣乱");
return;
}
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(message);
}
}
class DB{
public static List<User> list = new LinkedList<User>();
static{
list.add(new User(1,"zhangsan","zs",34));
list.add(new User(2,"lisi","ls",34));
list.add(new User(3,"a","h",34));
list.add(new User(4,"b","d",34));
list.add(new User(5,"c","g",34));
list.add(new User(6,"d","a",34));
list.add(new User(7,"e","d",34));
list.add(new User(8,"f","e",34));
list.add(new User(9,"g","a",34));
}
}

之后：jsp的填写，通过ajax异步提交page，然后得到相应的字符串

代码如下:

var mgs = xmlHttpRequest.responseText;
var persons = mgs.evalJSON();

将json数据解析并添加到显示的区域

代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'regist.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/prototype1.6.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
var paging = 0;
//
function page(p){
/*if(p == 'next' && paging < 3){
paging ++;
}else if(p == 'last' && paging > 1) {
paging --;
}else{
alert('错误');
}*/
if(p == 'next' && paging < 3){
paging ++;
if(paging > 1){
$(":button:eq(0)").removeAttr('disabled');
}
if(paging == 3){
$(":button:eq(1)").attr('disabled','disabled');
}
}else if(p == 'last' && paging > 1){
paging --;
$(":button:eq(1)").removeAttr('disabled');
if(paging == 1){
$(":button:eq(0)").attr('disabled','disabled');
}
}
createXmlHttpRequest();
xmlHttpRequest.onreadystatechange=back;
var url = encodeURI("/json_page/Paging?page="+paging);
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
//假设名字为xmlHttpRequest
function createXmlHttpRequest(){
if(window.ActiveXObject){
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest = new XmlHttpRequest();
}
}
//回调函数
function back(){
if( xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var mgs = xmlHttpRequest.responseText;
var persons = mgs.evalJSON();
//alert(mgs);
$("table").empty();
$("table").append( $("<tr><td>id</td><td>用户名</td><td>密码</td><td>age</td></tr>"));
for(var i = 0 ; i < persons.length;i++){
var person = persons[i];
var $tr = $("<tr><td>"+person.id+"</td><td>"+person.name+"</td><td>"+person.password+"</td><td>"+person.age+"</td></tr>");
$("table").append($tr);
}
}
}
</script>
</head>
<body>
<input type="button" disabled="disabled" value="上一页" onclick="page('last');"/><input type="button" value="下一页" onclick = "page('next');"/>
<table>
<tr><td>id</td><td>用户名</td><td>密码</td><td>age</td></tr>
</table>
</body>
</html>

另外：要有这两个js哦

代码如下:

JSP分页显示的实例代码

1.mysql的limit关键字 (DAO) select * from tablename limit startPoint, numberPerPage; tablename 就是要分页显示的那张表的名称: startPoint 就是起始的位置 -1: numberPerPage 就是一页显示的条数. 例如: select * from comment limit 20,5; 则是从comment表中抽取21~25号评论: 2.jQuery load函数 (页面JS) MySQL的limit
简单实现jsp分页

数据分页,在开发中必不可少,由于数据量太大,不得不进行处理.但是对于分页,又有很多种方式,比如使用sql语句的limit,或者使用jquery的插件.但是底层的逻辑,都是需要的. 在这里贴出bean对象的代码,以及一个辅助类.我做的这个项目是一个个人博客,算是个人网站吧. (只贴部分底层逻辑代码) Page.java package cn.edu.ldu.util; public class Page { private int everyPage; //每页显示的数量 private int
jsp读取数据库实现分页技术简析

这篇文章介绍的是用javabean和jsp页面来实现数据的分页显示,例子中所使用的数据库是Mysql. 1.先看javabean 类名: databaseBean.java: 以下为databaseBean.java的代码: 复制代码代码如下: package database_basic; import java.sql.*; import java.util.*; public class databaseBean { //这是默认的数据库连接方式 private String DBLoc
一个通用的jsp分页PageBean

package com.shaccp.web.util; import java.util.List; public class PageBean { /** * * * @author ppy 2008-10-18 14:3:56 * totalRecords 总记录数 * list 保存分页的数据 * pageNo 当前页 * pageSize 页大小 * query 保存用户查询的字符串 * pageAction 操作分页的Servlet或Action(struts) * method (
JSP实现的简单分页示例

本文实例讲述了JSP实现的简单分页示例.分享给大家供大家参考,具体如下: <%@ page language="java" import="java.util.*" contentType="text/html; charset=gbk"%> <%@ page import="com.yx.page.db.*"%> <%@ page import="java.sql.*" %&
JSP自定义分页标签TAG全过程

首先我们需要在WEB-INF/tld/目录下创建page.tld文件 <?xml version="1.0" encoding="ISO-8859-1"?> <taglib> <tlib-version>1.0</tlib-version> <jsp-version>1.2</jsp-version> <short-name>page</short-name> <u
jsp+servlet+javabean实现数据分页方法完整实例

本文实例讲述了jsp+servlet+javabean实现数据分页方法.分享给大家供大家参考,具体如下: 这里秉着且行且记的心态,记录下学习过程,学得快忘得快,生怕遗忘,以备日后使用. 用到的部分代码是自己在网上查找,并自己修改,加上自己的理解.也不知道算不算原创,只做自己学习记录. 使用相关:PostgreSQL数据库.dom4j.JSP.Servlet 一.首先是工程格局,来个全局视图方便读者与自己查看与使用思路为: 以config.xml文件记录配置信息,以方便数据库更改,方便移植与重用
一个实用的JSP分页代码

有热心网友回复:str += " 转到<select name='page' onChange=\"window.location.href='" + fileName + temp + "cur_page='+this.options[this.selectedIndex].value\">"; 已经试过了,没问题 1.以下是实现分页的类PageResultSet 复制代码代码如下: package page.bean; impo
jsp分页显示的实现代码

最近这几天在做JSP留言板设计的过程中,遇到了一个问题.先看一张截图: 这是随便在一个新闻的留言页面截的图,假如留言条数太多,那整个页面得排好长好长,这就直接给用户造成了麻烦.不舒服的感受,所以,解决这个问题,通常采用分页显示的方法. 要把页面显示方式设计成这样的方式,通常需要用到这几个基本变量:pageSize(每个页面所显示的记录数).pageCount(一共有多少个页面).showPage(目前显示第几页).recordCount(总的记录数),为了方便理解,画了一张图: 如果
jsp hibernate的分页代码第1/3页

可见使用Hibernate,在进行查询分页的操作上,是具有非常大的灵活性,Hibernate会首先尝试用特定数据库的分页sql,如果没用,再尝试Scrollable,如果不行,最后采用rset.next()移动的办法. (一)pager类 * @(#)Pager.java 2005-5-3 * * Copyright (c) 2005, Jeffrey Hsu */ package com.jeffrey.messagelove; /** * Pager holds the page info.

json实现jsp分页实例介绍(附效果图)

相关推荐

随机推荐