jsp+jquery无刷新分页求实例

Question

利用jquery的ajax技术,比如
$.get("这个是你的请求地址,比如action","这里是参数,要不要随便可以省略", function(data){
  //这个是返回的callback函数
  alert("Data Loaded: " + data);
  //$("#id").html(data);
});你后台比如是struts2,你只要在跳转的你想要的页面就行了,这样就会把整个页面以data返回到ajax的data上
然后你得到data,用$("#id").html(data)替换掉该区域就ok了,无刷新

Answer 1

一.页面js中导入jquery.js和page.js
然后在js中调用函数cut_page(page,count,div)
page-------当前页面
count------每页记录数量
div--------放记录的div二.当前页面导入包conn.DBbean和conn.OptionSP然后在内容中添加如下内容
//OptionSP构造函数中的student_info是表名和条件查询语句（eg. "book where id>3"）count需要和上面js的count一样，也是每页记录数
OptionSP sp=new OptionSP("student_info",count);
String start_op=request.getParameter("start");
if(start_op==null)
{
sp.set_start(1);
}
else
{
int start_cp=Integer.parseInt(start_op);
sp.set_start(start_cp);
}三.将你页面输出数据的sql语句放在如下语句中
"select * from (select t.*,rownum as h from (SQL语句) t ) where 
h>="+sp.get_start()+" and h<"+sp.get_end())
四.下面的代码是显示控制的，把它放在第一项div内的任何地方
//
<input type='text' value=<%=sp.get_start()%>  id='help_fenye' last_start='<%=sp.get_last_start()%>'  style='display:none'>
<span id='first_page' style='cursor:pointer;'>首页</span>
<span id='prev_page' style='cursor:pointer;'>上一页</span>
<span id='next_page' style='cursor:pointer;'>下一页</span> 
<span id='last_page' style='cursor:pointer;'>末页</span>
<span>当前第<%=sp.get_now_page() %>/<%=sp.get_max_page()%> 页</span>(共<%=sp.get_count_num()%>条记录)
附带:
conn.DBbean内容如下（保存在DBbean.java文件中）
//--------------------------分割线---------------------------------
package conn;
import java.sql.*;
public class DBbean {
private String driver_url="oracle.jdbc.driver.OracleDriver";
private String conn_url="jdbc:oracle:thin:@localhost:1521:orcl";
private String db_user="cp";
private String pass="123";
private Connection conn=null;
private Statement stmt=null;
public DBbean(){
//建立连接
try{
Class.forName(driver_url);
conn=DriverManager.getConnection(conn_url,db_user,pass);
stmt=conn.createStatement();
}
catch (Exception e)
{
System.out.println("无法建立连接");
}
}
//查询方法
public ResultSet executeQuery(String s)
{
ResultSet rs=null;
try{
rs=stmt.executeQuery(s);
}
catch(Exception e){
System.out.println("执行查询出现错误");
}
return rs;
}
//更新方法
public int executeUpdate(String s){
int result=0;
try{
result=stmt.executeUpdate(s);

}
catch(Exception e)
{
System.out.println("更新出现未知错误");
}
return result;
}
//返回Connection，用于orcle事务
public Connection reConnection()
{
return conn;
}
//关闭statement对象及连接
public void close(){
try{
conn.close();
stmt.close();
}
catch(Exception e)
{ }
}
}
//-----------------分割线-------------------------------------conn.OptionSP内容如下（保存在OptionSP.java文件中）//-----------------分割线-------------------------------------
package conn;
import java.sql.ResultSet;
public class OptionSP{
private int count_num=0;//记录总数
private int last_start=0;//用于控制输出
private int start;//用于控制输出
private int end=0;//用于控制输出
private int now_page=0;//当前第几页
private int max_page=0;//共有多少页
private int per_page_records=0;//每页记录数量
public DBbean dbb=new DBbean();
//构造方法设置页面显示记录条数
public OptionSP(String table_name,int num){
this.per_page_records=num;
String sql="select count(*) from "+table_name;
try {
ResultSet rs_count_cp=dbb.executeQuery(sql);
rs_count_cp.next();
//设置count_num
count_num=rs_count_cp.getInt(1);
dbb.close();
}
catch(Exception e)
{
System.out.print("SQL错误");
}
float a=(float)count_num;
//设置last_start
last_start=((int)Math.ceil(a/per_page_records)-1)*per_page_records+1;
float count_num_var=(float)count_num;
max_page=(int)Math.ceil(count_num_var/per_page_records);
}
//返回每页记录条数
public int get_per_page_records(){
return this.per_page_records;
}

//获取记录数量count_num
public int get_count_num()
{
return count_num;
} //获取last_start
public int get_last_start()
{
return last_start;
}
//设置start
public void set_start(int start_cp)
{

int last_start_var=get_last_start();
start=start_cp;
if(start>=last_start_var)
{
start=last_start_var;
}
//设置end
end=start+per_page_records;
//设置now_page
now_page=(start-1)/per_page_records+1;
}
//获取start
public int get_start()
{
return start;
} //获取end
public int get_end()
{
return end;
} //获取now_page
public int get_now_page()
{
return now_page;
}
//获取max_page
public int get_max_page()
{
return max_page;
}
public static void main(String args[])
{ }
}//-------------------------------分割线------------------------jquery.js直接从网上下载，目前最新是1.8的
page.js如下//ps是处理分页记录的页面,num是每页显示记录条数,odiv是显示数据的DIV
function cut_page(ps,num,odiv)
{
//首页
$("#first_page").click(function(){
var start=1;
$.post(ps,{"start":start},function(data){
$(odiv).html(data);
})
})
//上一页
$("#prev_page").click(function(){
var start_1=parseInt($("#help_fenye").val());
var start=start_1-num;
if(start<1)
{
start=1;
}
$.post(ps,{"start":start},function(data){
$(odiv).html(data);
})
})
//下一页
$("#next_page").click(function(){
var start_1=parseInt($("#help_fenye").val());
var start=start_1+num;
$.post(ps,{"start":start},function(data){
$(odiv).html(data);
})
})
//尾页
$("#last_page").click(function(){
var start=parseInt($("#help_fenye").attr("last_start"));
$.post(ps,{"start":start},function(data){
$(odiv).html(data);
})
})
}

Answer 2

http://download.csdn.net/detail/gyjgyjj/4264276   我自己以前写的 希望可以帮到你

Answer 3

LZ，我资源里面有个分页的例子，封装了分页标签，只需要在对应action中声明一个变量，jsp中使用就行。

Answer 4

自己实现多麻烦，用 jqgrid插件 方便多了。
jqgrid、easyui 。

Answer 5

要无刷新分页？  有2种  1、 用iframe嵌套起来  2、 ajax 异步获取列表json 

Answer 6

ajax 获取json数据，自己去控制

Answer 7

说句实话呀,无刷新分页一开始效果看着确实可以,但是时间用长了就会发现,无刷新分页太垃圾了,简单的说一个例子,比如我搜索一个列表,我搜到了一堆东西,要发给朋友看,你把链接发送过去给朋友看,结果打开的是没有搜索过的,你看很多大型的网站基本不搞ajax刷新的,这是我用ajax无刷新分页发现的问题