JAVA+树分页效果_json实现jsp分页实例介绍(附效果图)

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 list = new linkedlist();

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数据解析 并添加到显示的区域

string path = request.getcontextpath();

string basepath = request.getscheme()+"://"+request.getservername()+":"+request.getserverport()+path+"/";

%>

my jsp 'regist.jsp' starting page

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( $("

id用户名密码age"));

for(var i = 0 ; i < persons.length;i++){

var person = persons[i];

var $tr = $("

"+person.id+""+person.name+""+person.password+""+person.age+"");

$("table").append($tr);

}

}

}

id

用户名

密码

age

另外：要有这两个js哦

希望与广大网友互动？？

点此进行留言吧！