1. 程式人生 > >分頁外掛jquery.simplePagination.js使用筆記

分頁外掛jquery.simplePagination.js使用筆記

1. test_box.jsp頁面:

<script type="text/javascript" src="${ctxJs}/jquery-1.7.2.min.js"></script>

<script src="${ctxJs}/jquery.simplePagination.js"></script>


<input type="hidden" name="pageNo" value="1"/>

<!--結果表格-->
<table class="bad_list" id="loadData"></table>


<!--結果表格end--> 
//分頁    
        <div id="paging"></div>
        <div class="pagination-holder" id="pagingD"></div>   


//js請求

function loadInfoList(pageNo) {
var action = "${ctxPath}/test/findlist";
if(pageNo==undefined){

pageNo = $("#paging").pagination('getCurrentPage');
}
$("[name = 'pageNo']").val(pageNo);
var data = $("#formId").serializeArray();
var index =  layer.load(0, {shade: false,offset : ['300px','500px']});
$("#loadData").load(
action,
data,
function(response, status, xhr) {//查詢後臺
//var vv=response; 

 //請求返回的資料先填充test_data.jsp頁面的tbody

,然後把test_data.jsp頁面(即response)帶到當前頁面test_box.jsp填充table

if (status == "success") {
layer.close(index)
var totalNum = $("#assessListNum").val();
$("#paging").pagination('drawPage',pageNo);
$("#paging").pagination('updateItems', totalNum);
$("#pagingD").html(
"<p>共<span>" + totalNum + "</span>條記錄,每頁<span>"
+ $("#numPerPage").val()
+ "</span>條,當前第<em>"
+ $("#assessListCurrentPage").val()
+ "</em>頁/共<em>"
+ $("#assessListTotalPage").val()
+ "</em>頁</p>")

}
})
}


2. Controller層:

@RequestMapping(value = "/test/findInfo", method = RequestMethod.POST)
public String findccbBadInfo(Model model,HttpServletRequest request, AnalysisReq analysisReq) {
MyDataList listResult = alanalysisService.findInfo(analysisReq);
model.addAttribute("result", listResult);
return "analysis/test_data";
}

3.test_data.jsp:(只有一個tbody)

<tbody>
<tr class="first">
<th>地址</th>
<th>時間</th>
<th>金額</th>
<th>餘額</th>
<th>價值</th>
</tr>
<tr>
<td style="text-align: left; padding-left:10px;"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</c:otherwise>
</c:choose>
</tbody>