美文网首页
 [Servlet+Html5+ajax 实现简单分页]

 [Servlet+Html5+ajax 实现简单分页]

作者: LH_0811 | 来源:发表于2017-01-16 18:49 被阅读120次

    原文:http://blog.csdn.net/zhouzhiwengang/article/details/38639607

    Servlet ------dao层

    package com.vixuan.dao;  
      
    import java.sql.Connection;  
    import java.sql.ResultSet;  
    import java.sql.SQLException;  
    import java.sql.Statement;  
    import java.util.ArrayList;  
      
    import com.vixuan.database.MySQLUtil;  
    import com.vixuan.model.LocationInfo;  
      
    public class LocationInfoDao {  
        private static Connection conn;  
        private static ResultSet resultset;  
        private static Statement statement;  
        private static int pagesize = 5; // 分页大小  
      
        // 静态模块  
        static {  
            conn = MySQLUtil.getConn();  
        }  
      
        // 公共静态方法  
        public static ResultSet ExecuteQuery(String sql) {  
            try {  
                statement = conn.createStatement();  
                resultset = statement.executeQuery(sql);  
            } catch (SQLException e) {  
                e.printStackTrace();  
            }  
      
            return resultset;  
        }  
      
        // 分页逻辑-----参数:当前页码  
        public static ArrayList<LocationInfo> getLocationInfoList(int currentpageno) {  
            ArrayList<LocationInfo> LocationInfoList = new ArrayList<LocationInfo>();  
            int BeginRecord;  
              
                BeginRecord= (currentpageno - 1) * pagesize; // 开始位置  
              
              
          
            resultset = ExecuteQuery("select * from t_locationinfo limit "  
                    + BeginRecord + "," + pagesize);  
            try {  
                while (resultset.next()) {  
                    LocationInfo locationinfo = new LocationInfo();  
                    locationinfo.setAddress(resultset.getString("address"));  
                    locationinfo.setLat(resultset.getString("lat"));  
                    locationinfo.setLng(resultset.getString("lng"));  
                    locationinfo.settId(resultset.getInt("t_id"));  
                    locationinfo.setUmobile(resultset.getString("umobile"));  
                    locationinfo.setUpdateTime(resultset.getString("update_time"));  
                    LocationInfoList.add(locationinfo);  
                }  
            } catch (SQLException e) {  
                // TODO Auto-generated catch block  
                e.printStackTrace();  
            }  
            return LocationInfoList;  
        }  
      
        // 分页统计  
        public static int getPageCount() {  
            int total = 0; // 总记录数  
            int PageCount = 0; // 页码总数  
            resultset = ExecuteQuery("select count(*) from t_locationinfo");  
            try {  
                if (resultset.next()) {  
                    total = resultset.getInt(1);  
                    PageCount = (total - 1) / pagesize + 1;  
                }  
            } catch (SQLException e) {  
                e.printStackTrace();  
            }  
            return PageCount;  
        }  
          
        public static int geTotalPage() {  
            int total = 0; // 总记录数        
            resultset = ExecuteQuery("select count(*) from t_locationinfo");  
            try {  
                if (resultset.next()) {  
                    total = resultset.getInt(1);                  
                }  
            } catch (SQLException e) {  
                e.printStackTrace();  
            }  
            return total;  
        }  
      
    }  
    

    Servlet -----service服务层

    
    
    package com.vixuan.service;  
      
    import java.io.IOException;  
    import java.io.PrintWriter;  
    import java.util.ArrayList;  
      
    import javax.servlet.ServletException;  
    import javax.servlet.http.HttpServlet;  
    import javax.servlet.http.HttpServletRequest;  
    import javax.servlet.http.HttpServletResponse;  
      
    import net.sf.json.JSONArray;  
    import net.sf.json.JSONObject;  
      
    import com.vixuan.dao.LocationInfoDao;  
    import com.vixuan.model.LocationInfo;  
      
    public class LocationServer extends HttpServlet {  
      
        /**  
         * 地理位置信息分页查询:Servlet  
         */  
        private static final long serialVersionUID = 1L;  
      
        @Override  
        public void doGet(HttpServletRequest request, HttpServletResponse response)  
                throws ServletException, IOException {  
            // TODO Auto-generated method stub  
            //请求参数:当前页面  
            Integer pageNo=Integer.parseInt(request.getParameter("pageno"));  
            //返回相关数据信息  
            ArrayList<LocationInfo> list=LocationInfoDao.getLocationInfoList(pageNo);  
            //总页面数  
            Integer totalpage=LocationInfoDao.getPageCount();  
            //数据总记录数  
            Integer total=LocationInfoDao.geTotalPage();  
              
            StringBuilder builder=new StringBuilder();  
            builder.append("[");  
            for(int i=0;i<list.size();i++){  
                StringBuilder content=new StringBuilder();  
                String address=list.get(i).getAddress();  
                content.append("{ \"address\":\"").append(list.get(i).getAddress()).append("\"");  
                String lat=list.get(i).getLat();  
                content.append(",\"lat\":").append(list.get(i).getLat()).append("");  
                content.append(",\"lng\":").append(list.get(i).getLng()).append("");  
                content.append(",\"mobile\":\"").append(list.get(i).getUmobile()).append("\"");  
                content.append(",\"no\":").append(list.get(i).gettId()).append("}");  
                if(i<list.size()-1){  
                    content.append(",");  
                }  
                builder.append(content.toString());  
                  
            }  
            builder.append("]");  
              
            StringBuilder json=new StringBuilder();  
            json.append("{\"total\":").append(totalpage).append("");  
            json.append(",\"totalPage\":").append(totalpage).append("");  
            json.append(",\"page\":").append(pageNo).append("");  
            json.append(",\"pageSize\":").append("5").append("");  
            json.append(",\"list\":").append(builder.toString()).append("}");  
            response.setCharacterEncoding("utf-8");  
            response.setContentType("text/json");  
             PrintWriter out = response.getWriter();     
             out.print(json.toString());   
             System.out.println(json.toString());  
             out.flush();  
             out.close();     
              
              
        }  
      
        @Override  
        public void doPost(HttpServletRequest request, HttpServletResponse response)  
                throws ServletException, IOException {  
            // TODO Auto-generated method stub  
            this.doGet(request, response);  
        }  
          
      
    }  
    
    [HTML5](http://lib.csdn.net/base/html5)  相关页面和ajax函数
    
    <!DOCTYPE html>  
    <html lang="zh-cn">  
    <head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <title></title>  
    <!-- Bootstrap -->  
    <link href="css/bootstrap.min.css" rel="stylesheet">  
      
      
    </head>  
    <body>  
        <div class="container">  
            <div class="row">  
                <div class="col-md-1"></div>  
                <div class="col-md-4"></div>  
                <div class="col-md-6">  
                    <div class="row">  
                        <table class="table table-bordered table-hover table-condensed">  
                            <thead>  
                                <tr>  
                                    <th>员工编号</th>  
                                    <th>员工姓名</th>  
                                    <th>经度</th>  
                                    <th>纬度</th>  
                                    <th>地理位置</th>  
                                    <th>操作</th>  
                                </tr>  
                            </thead>  
                            <tbody id="content">  
                                <tr>  
                                    <td>01</td>  
                                    <td>张三</td>  
                                    <td>112.35</td>  
                                    <td>39.85</td>  
                                    <td>中国北京</td>  
                                    <td>查看</td>  
                                </tr>  
                                <tr>  
                                    <td>02</td>  
                                    <td>李四</td>  
                                    <td>112.12</td>  
                                    <td>32.23</td>  
                                    <td>中国,武汉</td>  
                                    <td>查看</td>  
                                </tr>  
                                <tr>  
                                    <td>01</td>  
                                    <td>王五</td>  
                                    <td>110.89</td>  
                                    <td>31.67</td>  
                                    <td>中国,成都</td>  
                                    <td>查看</td>  
                                </tr>  
                            </tbody>  
                        </table>  
                    </div>  
                    <div class="row">  
                        <div class="col-md-5"></div>  
                        <div class="col-md-7" id="pageCount"></div>  
                    </div>  
                </div>  
                <div class="col-md-1"></div>  
            </div>  
        </div>  
      
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->  
        <script src="js/jquery-1.9.1.min.js"></script>  
        <!-- Include all compiled plugins (below), or include individual files as needed -->  
        <script src="js/bootstrap.min.js"></script>  
        <script type="text/javascript">  
            var curPage = 1; //当前页码    
            var total, pageSize, totalPage;  
            $(document).ready(function() {  
              
                getData(1);  
      
            });  
            //获取分页条    
            function getPageBar() {  
                //页码大于最大页数    
                if (curPage > totalPage)  
                    curPage = totalPage;  
                //页码小于1    
                if (curPage < 1)  
                    curPage = 1;  
                pageStr = "<span>共" + total + "条</span><span>" + curPage + "/"  
                        + totalPage + "</span>";  
      
                //如果是第一页    
                if (curPage == 1) {  
                    pageStr += "<span>首页</span><span>上一页</span>";  
                } else {  
                    pageStr += "<span><a href='javascript:getData(1)' rel='1'>首页</a></span><span><a href='javascript:getData("+(curPage - 1)+")' rel='"  
                            + (curPage - 1) + "'>上一页</a></span>";  
                }  
      
                //如果是最后页    
                if (curPage >= totalPage) {  
                    pageStr += "<span>下一页</span><span>尾页</span>";  
                } else {  
                    pageStr += "<span><a href='javascript:getData("+((curPage) + 1)+")' rel='"  
                            + (parseInt(curPage) + 1)  
                            + "'>下一页</a></span><span><a href='javascript:getData("+totalPage+")' rel='"  
                            + totalPage + "'>尾页</a></span>";  
                }  
      
                $("#pageCount").html(pageStr);  
            }  
      
            function getData(page) {  
                
                $.ajax({  
                    type : 'POST',  
                    url : 'http://localhost:8080/LocationManager/location',  
                    data : {  
                        'pageno' : page  
                    },  
                    dataType : 'json',  
                    success : function(json) {  
                        $("#content").empty();  
                        total = json.total; //总记录数    
                        pageSize = json.pageSize; //每页显示条数    
                        curPage = json.page; //当前页    
                        totalPage = json.totalPage; //总页数    
      
                        var list = json.list;//返回内容  
                        for(var i=0;i<list.length;i++){  
                         var body="<tr>";  
                        body=body+"<td>"+list[i].no+"</td>";  
                        body=body+"<td>"+"01"+"</td>";  
                        body=body+"<td>"+list[i].lat+"</td>";  
                        body=body+"<td>"+list[i].lng+"</td>";  
                        body=body+"<td>"+list[i].address+"</td>";  
                        body=body+"<td>"+"查看"+"</td>";  
                        body=body+"</tr>"  
                         $("#content").append(body);  
                        }  
                       
      
                    },  
                    complete : function() { //生成分页条    
                        getPageBar();  
                    },  
                    error : function() {  
                        alert("数据加载失败");  
                    }  
                });  
            }  
        </script>  
    </body>  
    </html>  
    

    结果展示:


    相关文章

      网友评论

          本文标题: [Servlet+Html5+ajax 实现简单分页]

          本文链接:https://www.haomeiwen.com/subject/gjupbttx.html