ajax无刷新分页

来源：互联网发布：淘宝开店必胜绝招编辑：程序博客网时间：2024/04/29 07:37

首页初始化当前页和每页显示的页数

getData(1, 8);

然后发送ajax请求去后台读取ajax动态数据

function getData(curPage, pageSize) {WebsiteAjax.getInstance({ajaxUrl : urlPrefix + "main/page/getRewardRecord", type : "GET",dataType : "JSONP",dataParameter : { page_size : pageSize, page : curPage },succesMethod : function(data, textStatus) {var html = template.render("rewardRecordData", data);$("#rewardRecordHtml").html(html);var pageHtml = template.render("pageData", data);$("#pageHtml").html(pageHtml);}});}

在以前处理ajax 返回值需要动态写入表示数据需要各种 +号'号代码可读性十分差，相信看过那种蛋疼代码的，脑中肯定回浮现那超长代码的场景。这里就可以使用JS模板引擎来处理这种蛋疼的拼接。前提是要导入js模板引擎的JS

<script type="text/javascript" src="http://static.zqgame.com/js/template.js"></script>

然后我们来看处理数据部分

<tbody id="rewardRecordHtml">                    <script id="rewardRecordData" type="text/html">                    <%for(i = 0; i < data.length; i++) {%>                            <tr align="left">                                <td><span class="start"></span><%=data[i].prizeName%></td>                                <td><%=data[i].accountName%></td>                                <td><%=data[i].receiveTimeStr%></td>                            </tr>                        <%}%>                        </script>                    </tbody>

tbody部分是需要动态生成的数据 data是我返回的json中的数据在<script>中可以直接使用data拿到数据，下面我贴下数据bean的代码

public class PageBean {protected int paseSize;protected int currentPage;protected int totalRows;protected int totalPages;private List<?> data;public PageBean() {}public PageBean(List<?> data) {Pagination pager = PageContext.getPageContext();this.paseSize = pager.getPageSize();this.currentPage = pager.getCurrentPage();this.totalRows = pager.getTotalRows();this.totalPages = pager.getTotalPages();this.data = data;}public PageBean(int paseSize, int currentPage, int totalRows,int totalPages, String href, List<?> data) {this.paseSize = paseSize;this.currentPage = currentPage;this.totalRows = totalRows;this.totalPages = totalPages;this.data = data;}public int getPaseSize() {return paseSize;}public void setPaseSize(int paseSize) {this.paseSize = paseSize;}public int getCurrentPage() {return currentPage;}public void setCurrentPage(int currentPage) {this.currentPage = currentPage;}public int getTotalRows() {return totalRows;}public void setTotalRows(int totalRows) {this.totalRows = totalRows;}public int getTotalPages() {return totalPages;}public void setTotalPages(int totalPages) {this.totalPages = totalPages;}public List<?> getData() {return data;}public void setData(List<?> data) {this.data = data;}}

这样就解决了上面我说的问题，下面处理分页条的数据

<div class="pageList" id="pageHtml"><script type="text/html" id="pageData"><%if(currentPage != 1) {%><a href="javascript:listToPage(1);">首页</a><a href="javascript:listToPage(<%=currentPage - 1%>);">上一页</a><%}%><%if(totalPages <= 8){%><%for(i = 1; i <= totalPages; i++) {%><%if(currentPage == i) {%><a href="#" class="on"><%=i%></a><%}else {%><a href="javascript:listToPage(<%=i%>);"><%=i%></a><%}%><%}%><%}else {%><%if(currentPage == 1) {%><a href="#" class="on">1</a><a href="javascript:listToPage(2);">2</a><a href="javascript:listToPage(3);">3</a>...<a href="javascript:listToPage(<%=totalPages - 1%>);"><%=totalPages - 1%></a><a href="javascript:listToPage(<%=totalPages%>);"><%=totalPages%></a><%}else if(currentPage < 6) {%><%for(i = 1; i <= currentPage - 1; i++ ) {%><a href="javascript:listToPage(<%=i%>);"><%=i%></a><%}%><span class="current"><%=currentPage%></span><a href="javascript:listToPage(<%=currentPage + 1%>);"><%=currentPage + 1%></a>...<a href="javascript:listToPage(<%=totalPages - 1%>);"><%=totalPages - 1%></a><a href="javascript:listToPage(<%=totalPages%>);"><%=totalPages%></a><%}else if(currentPage >= 6 && currentPage < totalPages - 4) {%><a href="javascript:listToPage(1);">1</a><a href="javascript:listToPage(2);">2</a>...<a href="javascript:listToPage(<%=currentPage - 1%>);"><%=currentPage - 1%></a><span><%=currentPage%></span><a href="javascript:listToPage(<%=currentPage + 1%>);"><%=currentPage + 1%></a>...<a href="javascript:listToPage(<%=totalPages-1%>);"><%=totalPages - 1%></a><a href="javascript:listToPage(<%=totalPages%>);"><%=totalPages%></a><%}else {%><a href="javascript:listToPage(1);">1</a><a href="javascript:listToPage(2);">2</a>...<%for(i = totalPages - 4; i <= totalPages; i++) {%><%if(currentPage == i) {%><span class="on"><%=i%></span><%}else {%><a href="javascript:listToPage(<%=i%>);"><%=i%></a><%}%><%}%><%}%><%}%><%if(currentPage < totalPages) {%><a href="javascript:listToPage(<%=currentPage + 1%>);">下一页</a><a href="javascript:listToPage(<%=totalPages%>);">尾页</a><%}%></script></div>

function listToPage(_curPage) {getData(_curPage, 8);}

这样就实现了无刷的分页，至于有查询条件的需要自己在listToPage函数再结合隐藏域来把条件封装回传

0 0