基本业务：异步模板翻页

今天说说异步翻页，注意此处我说的是PC端的异步翻页，并非是APP端的异步翻页

比如我们想要执行下面的翻页：

在点击全部的时候，出现全部的信息
在点击招标中的时候，出现状态为招标中的信息
在点击已完成的时候，出现状态为已完成的信息
并且每个tab都有对应的翻页功能

那如何完成这个功能呢？

1. 先做一个空白的页面，只需要基本的框架就行了
2. 做异步请求，在空白的tbody中插入异步请求来的元素即可

具体的思维图如下：

但是这样会带来的问题是操作过于复杂，因为需要一个一个插入进去，同时还会涉及DOM元素

所以此时采用另一种思路，就是不返回JSON格式的数据，而是直接返回模板（或者说是代码片段），然后将这个模板或者代码片段插入tbody即可

具体思维图如下：

根据上面的思维图去做的好处是：避免了DOM的复杂操作，而是能够直接操控模板，这样就能够将操作简化

接下就是通过代码去完成了，首先是准备模板

也许下面的模板让你看的眼花缭乱吧，我们在此处化繁为简，只需要关注其中的主要元素：pageInfo 和下面的翻页插件，说明我们需要共享一个pageInfo的翻页对象，并且随着页面的返回，我们还需要返回对应的插件回去

注：下面采用的freemarke做的模板，并且分页采用的是：twbsPagination插件

<!-- invet_list.ftl模板  -->
<#if pageInfo.list?size &gt; 0 >
	<#list pageInfo.list as data>
		<tr>
			<td>${data.createUser.username }</td>
			<td>${data.title}</td>
			<td class="text-info">${data.currentRate}%</td>
			<td class="text-info">${data.bidRequestAmount}</td>
			<td>${data.displayReturnType}</td>
			<td>
				<div class="">
					${data.persent} %
				</div>
			</td>
			<td><a class="btn btn-danger btn-sm"
				href="/borrow_info?id=${data.id}">查看</a>
			</td>
		</tr>
	</#list>
<#else>
	<tr>
		<td colspan="7" align="center">
			<p class="text-danger">目前没有符合要求的标</p>
		</td>
	</tr>
</#if>

<script type="text/javascript">
	$(function(){
		$("#page_container").empty().append($('<ul id="pagination" class="pagination"></ul>'));
		$("#pagination").twbsPagination({
			totalPages:${pageInfo.pages} || 1,
			startPage:${pageInfo.pageNum} || 1,
			initiateStartPageClick:false,
			onPageClick : function(event, page) {
				$("#currentPage").val(page);
				$("#searchForm").submit();
			}
		});
	});
</script>

有了模板之后还需要的就是做controller了

public class InvestController{

	@Autowired
	private IBidRequestService bidRequestService;
	
	//投资页面
	@RequestMapping("invest")
	public String invest(){
		return "invest";
	}

	//前台首页
	@RequestMapping("invest_list")
    public String invest(Model model, @ModelAttribute("qo")BidRequestQuery qo){
        qo.setPageSize(3);

        qo.setStates(new int[]{
                BidConst.BIDREQUEST_STATE_BIDDING,
                BidConst.BIDREQUEST_STATE_PAYING_BACK,
                BidConst.BIDREQUEST_STATE_COMPLETE_PAY_BACK});

        model.addAttribute("pageInfo",bidRequestService.query(qo));
        return "invest_list";
    }
}

至此后台数据的准备就完成了，这里与传统返回JSON格式不同的是，这里返回的是一个代码片段

接下来需要完成的是前台JS

    <script type="text/javascript">
        $(function () {
            var searchForm = $("#searchForm");
            var gridBody = $("#gridBody");
            searchForm.ajaxForm(function (data) {
                gridBody.hide();
                gridBody.html(data);
                gridBody.show(500);
            });
            searchForm.submit();

            $("input[name=bidRequestState]").change(function () {
                $("#currentPage").val(1);
                searchForm.submit();
            });
        });
    </script>

上面与传统的返回JSON格式不同的是，这里返回的是TEXT格式的模板文文件

下面是对应的网页代码：

<!-- 网页内容 -->
<div class="container" style="min-height: 500px;">
    <h4 class="page-title">投资列表</h4>
    <form action="/invest_list" id="searchForm" method="POST">
        <input type="hidden" name="currentPage" id="currentPage" value="1">
        <div style="margin: 20px 0px;">
            <span class="text-muted">标的状态</span>
            <div style="margin-left: 30px" class="btn-group" data-toggle="buttons">
                <label class="btn btn-default active">
                    <input type="radio" name="bidRequestState" value="-1" autocomplete="off" checked/>&emsp;全部&emsp;
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="bidRequestState" value="2" autocomplete="off"/>&emsp;招标中&emsp;
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="bidRequestState" value="9" autocomplete="off"/>&emsp;已完成&emsp;
                </label>
            </div>
        </div>
    </form>
    <table class="table el-table table-hover">
        <thead id="gridHead">
        <tr>
            <th>借款人</th>
            <th width="180px">借款标题</th>
            <th>年利率</th>
            <th>金额</th>
            <th>还款方式</th>
            <th>进度</th>
            <th width="80px">操作</th>
        </tr>
        </thead>
        <tbody id="gridBody">
        <!--AJAX查询显示数据-->
        </tbody>
    </table>
    <div style="text-align: center;" id="page_container">
        <ul id="pagination" class="pagination"></ul>
    </div>
</div>

至此异步翻页技术的基本应用就算完成了

总结一下：异步翻页技术的特点

• 相较与传统的异步翻页更为简便，至少不用操作DOM
• 异步翻页后台方法返回的是一个代码片段，传统方法返回的是JSON数据
• 异步翻页虽然方便但是必须准备模板，如有必要还必须准备JS，调试比较麻烦