使用到的技术:
·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 <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 "; html += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >Pre "; html += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>Next "; html += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >Last "; 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>