(jsp和servlet功能篇)jsp+servlet+jquery分页代码

清疚 2023-10-18 22:34 73阅读 0赞

首先看运行效果图：

![Center][]

第一步：编写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>	
    	
    	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    	
    	<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代码：

[Center]: https://img-blog.csdn.net/20130805114328968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center