首先看运行效果图：
第一步：编写servlet 代码：
package com.rf.servlet;
import java.io.IOException;
import java.io.OutputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.rf.util.OracleUtil;
public class DingdanServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
//相关请求参数(订单状态、车辆类型)和可选参数（城市编号）
// String zhuangtai=request.getParameter("zhuangtai");
// String leixing=request.getParameter("leixing");
// String cityid=request.getParameter("cityid");
//数据库的工具类
Connection connection;
ResultSet resultset;
Statement statement;
//数据库相关查询语句(oracle 分页查询语句（动态 添加的参数：订单状态、车辆类型和城市编号）)
String sql="select * from(select dingdanxx.liushuih,dingdanxx.chuangjiansj,dingdanxx.dangqianwz,dingdanxx.mudedi,dingdanxx.chengke_id,dingdanxx.jiajia,dingdanxx.yuyinwj,dingdanxx.dengdaisj,rownum rc from dingdanxx where dingdanxx.chelianglx='0' and dingdanxx.zhuangtai='2' and rownum<=20) where rc>10 ";
try{
connection=OracleUtil.getConn();
statement=connection.createStatement();
resultset=statement.executeQuery(sql);
//拼接相关的json 格式数据
StringBuffer json=new StringBuffer();
int i=0;
json.append("[");
while(resultset.next()){
if(i>0){
json.append(",");
}
json.append("{liushuih:'").append(resultset.getString(1)).append("'");
json.append(",chuangjiansj:'").append(resultset.getString(2)).append("'");
json.append(",dangqianwz:'").append(resultset.getString(3)).append("'");
json.append(",mudedi:'").append(resultset.getString(4)).append("'");
json.append(",chengke_id:'").append(resultset.getString(5)).append("'");
json.append(",jiajia:'").append(resultset.getString(6)).append("'");
json.append(",yuyinwj:'").append(resultset.getString(7)).append("'");
json.append(",dengdaisj:'").append(resultset.getString(8)).append("'");
json.append("}");
i++;
}
json.append("]");
//相关数据的输出
OutputStream out = response.getOutputStream();
out.write(json.toString().getBytes("UTF-8"));
out.close();
//关闭数据库的连接操作
OracleUtil.closeCSR(connection, statement, resultset);
}catch(Exception e){
e.printStackTrace();
}
}
@Override
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(req,resp);
}
}
第二步：编写Jsp页面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>订单信息分页</title>
<!--加载jquery核心文件 -->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<!--加载Jquery功能代码 -->
<script type="text/javascript" src="js/edc.js"></script>
</head>
<body>
<input type="Submit" value="Jsp+Jquery分页" align="MIDDLE" οnclick="bindDate();"/>
<table border="3" id="ygxxtable">
<tr>
<th>订单编号</th>
<th>创建时间</th>
<th>当前位置</th>
<th>目的地</th>
<th>乘客编号</th>
<th>愿意加价</th>
<th>语音文件</th>
<th>等待时间</th>
</tr>
</table>
<div id="foot">
<div class="breakpage">3条记录 1/1 <a id="previous" href="#" οnclick="page()">上一页</a> <a id="next" href="#" οnclick="page()">下一页</a></div>
</div>
</body>
</html>
第三步：编写Jquery代码：
function bindDate(){
alert("????");
$.ajax({
url: "dingdan",
type: 'post',
success: function(data){
if(data != null||data != "" ){
//解析相关json 格式数据
var dataObj=eval("("+data+")");
for(var i=0;i<dataObj.length;i++){
var liushuih = dataObj[i].liushuih;
var chuangjiansj = dataObj[i].chuangjiansj;
var dangqianwz= dataObj[i].dangqianwz;
var mudedi = dataObj[i].mudedi;
var chengke_id = dataObj[i].chengke_id;
var jiajia = dataObj[i].jiajia;
var yuyinwj = dataObj[i].yuyinwj;
var dengdaisj= dataObj[i].dengdaisj;
//在table 添加一行新数据
var tr = "<tr><td >"+liushuih+"</td><td >"+chuangjiansj+"</td><td >"+dangqianwz+"</td><td >"+mudedi+"</td><td >"+chengke_id+"</td><td >"+jiajia+"</td><td >"+yuyinwj+"</td><td >"+dengdaisj+"</td></tr>"
$("#ygxxtable").append(tr);
}
}else{
alert("没有数据");
}
},
error: function(data) {
}
});
}