• spring mvc实现ajax 分页


    使用到的技术:
    ·spring 3 mvc
    ·json
    ·jquery
    ·java
    ·mysql
    首先,要了解如何在spring mvc中使用json
    以下主要从Dao和View及Controller来分析:

    Dao层:

        public List<</span>Position> getPagePosition(int pageNum,int pageSize){        
          //select * from t_position order by id desc limit (pageNum-1)*pagesize , pagesize    
                List<</span>Position> list = jdbc.query("select * from position order by id desc limit ?,? ", new Object[]{(pageNum-1)*pageSize>=0?(pageNum-1)*pageSize:0,pageSize},
                        new RowMapper<</span>Position>() {
                            public Position mapRow(ResultSet rs, int rowNum)
                                    throws SQLException {
                                return populate(rs);
                            }
                        }
                );
                return list;    
            }

    Controller中代码:

        @RequestMapping("/positionlist")
            public String listPosition(Model model,
                    @RequestParam(value = "pagesize", required = false, defaultValue = "5") int pagesize,
                    @RequestParam(value = "pagenum", required = false, defaultValue = "1") int pagenum){
                int recordCount = positionMgr.getAll().size();
                int pageCount = (recordCount+pagesize-1)/pagesize ;
                model.addAttribute("pageTitle", "Position List");
                return "positionlist";
            }
            
            @RequestMapping("/positionlistajax")
            public @ResponseBody List<</span>Position> listPositionDo(Model model,
                    @RequestParam(value = "pagesize", required = false, defaultValue = "5") int pagesize,
                    @RequestParam(value = "pagenum", required = false, defaultValue = "1") int pagenum){        
                List<</span>Position> ret = positionMgr.getPagePosition(pagenum, pagesize);
                return ret;
            }

    View层:

        <</span>script type="text/javascript">
                var pageIndex = 0;
                var pageSize = 5;
                $(function () {
                   
                        pageIndex = 1;
                        AjaxGetData(pageIndex, pageSize);
                  
                });
    
                function AjaxGetData( index, size) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/positionlistajax",
                        type: "Get",
                        data: "pagenum=" + index + "&pagesize=" + size,
                        dataType: "json",
                        success: function (json) {
                            
        var html = "";
                             html += "<table>";
                             html += "<thead>";
                             html += "<tr><th colspan=7 >Position List</th></tr>";
                             html += "<tr><th>ID</th><th>Name</th><th>Location</th><th>Nature</th><th>Number</th><th>End Date</th><th>Operation</th></tr>";
                        
                             html += "</thead>";
                             html += "<tbody>";      
                           for(position in json){
                           html += "<tr>";
                           html += "<td>"+json[position].id+"</td>";
                               html += "<td>"+json[position].name+"</td>";
                               html += "<td>"+json[position].location+"</td>";
                               html += "<td>"+json[position].nature+"</td>";
                               html += "<td>"+json[position].number+"</td>";
                               html += "<td>"+json[position].endDate+"</td>"; 
                               html += "<td><a href='editposition?id="+json[position].id+"'>Edit&nbsp;<a href='position?id="+json[position].id+"'>View</td>"; 
                               html += "</tr>";
                        
                           }
                           html += "</tbody>";
                          
                          html += "<tfoot>";
                          html += "<tr>";
                          html += "<td colspan='7'>";
                          html += "<span>Total Records:" + ${recordCount} + "; Total Page:<span id='count'>" +${pageCount} + "" + "";
                          html += "<a href='javascript:void' onclick='GoToFirstPage()' id='aFirstPage' >First&nbsp;&nbsp; ";
                          html += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >Pre&nbsp;&nbsp; ";
                          html += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>Next&nbsp;&nbsp; ";
                          html += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >Last&nbsp;&nbsp; ";
                          html += "<input type='text' size='4' /><input type='button' value='Jump' onclick='GoToAppointPage(this)' /> ";
                          html += "</td>";
                          html += "</tr>";
                          html += "</tfoot>";
                          html += "</table>";
                          //alert(html);
                           $('#divResult').html("");
                           $('#divResult').html(html);
                           
                        
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(XMLHttpRequest);
                            alert(textStatus);
                            alert(errorThrown);
                        }
                    });
                }
                
                function GoToFirstPage() {
                    pageIndex = 1;
                    AjaxGetData( pageIndex, pageSize);
                }
                
                function GoToPrePage() {
                    pageIndex -= 1;
                    pageIndex = pageIndex >= 1 ? pageIndex : 1;
                    AjaxGetData( pageIndex, pageSize);
                }
               
                function GoToNextPage() {
                    if (pageIndex <</span> parseInt($("#count").text())) {
                        pageIndex += 1;
                    }
                        AjaxGetData( pageIndex, pageSize);
                }
               
                function GoToEndPage() {
                    pageIndex = parseInt($("#count").text()) ;
                    AjaxGetData( pageIndex, pageSize);
                }
               
                function GoToAppointPage(e) {
                    var page = $(e).prev().val();
                    if (isNaN(page)) {
                        alert("Page should be a valid number");
                    }
                    else {
                        var tempPageIndex = pageIndex;
                        pageIndex = parseInt($(e).prev().val());
                        if (pageIndex <</span>= 0 || pageIndex > parseInt($("#count").text())) {
                            pageIndex = tempPageIndex;
                            alert("Please input valid page scope!");
                        }
                        else {
                            AjaxGetData(pageIndex, pageSize);
                        }
                    }
                }
            <</span>/script>
    <</span>div id="divResult" ><</span>/div>
  • 相关阅读:
    ES6 正则的扩展(待细读)
    ES6 字符串的扩展(待细读)
    CImage访问像素及其像素操作总结
    Top-Down和Bottom-Up位图的区别
    C++运算符优先级
    图像处理库CImg
    DDX_Text详细用法
    DDX和DDV——控件与变量之间值的传递
    JavaScript实现的9大排序算法
    Visual Studio快捷键
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/4844382.html
Copyright © 2020-2023  润新知