定义一个全局的分页加载变量,并设置为true:
var __isReSearch=true;
定义分页的一些数据:
var __PageSize = 10; var __SearchCondition = { "PageSize": __PageSize, "PageIndex": 0, "SortField": ""}; var __TotalCount;
写一个数据模板:
<script type="text/template" id="CD_DataListTemplate"> <tr> <td>{a}</td> <td>{b}</td> <td>{c}</td> <td>{d}</td> <td>{e}</td> </tr> </script>
当从服务器加载了数据,进行数据展现和分页展现:
function onSearchSuccess(resultJsonData) { __TotalCount = resultJsonData.TotalCount; var pageCount = 0; pageCount = parseInt(resultJsonData.TotalCount / __SearchCondition.PageSize); if (resultJsonData.TotalCount % __SearchCondition.PageSize > 0) { pageCount++; } if (resultJsonData.TotalCount > 0) { var userHtml = ""; $("#tbody").html(''); //debugger; for (var i = 0; i < resultJsonData.WorkOrderManagerList.length; i++) { userHtml += $("#tl_WorkOrderManagerInfo").html() .replace(/{a}/g, resultJsonData.WorkOrderManagerList[i].a) .replace(/{b}/g, resultJsonData.WorkOrderManagerList[i].b) .replace(/{c}/g, resultJsonData.WorkOrderManagerList[i].c) .replace(/{d}/g, resultJsonData.WorkOrderManagerList[i].d) .replace(/{e}/g, resultJsonData.WorkOrderManagerList[i].e); } $("#tbody").html(userHtml); if (__isReSearch) { //debugger; $("#xx").show(); $("#xx").page("destroy"); $("#xx").page({ total: resultJsonData.TotalCount, pageSize: __PageSize, pageBtnCount: 9, showFirstLastBtn: true, firstBtnText: "首页", lastBtnText: "尾页", prevBtnText: "上一页", nextBtnText: "下一页", loadFirstPage: true, showInfo: true, infoFormat: '{start} ~ {end}条,共{total}条', showJump: false, jumpBtnText: '确定', showPageSizes: false, pageSizeItems: null }).on("pageClicked", function (event, pageIndex) { getDataByPage(pageIndex); }); } } else { $("#xxx").hide(); $("#tbody").html(''); $("#tbody").html('<tr><td colspan=n>无记录</td></tr>'); } }
点击分页之后加载数据,但不需要再重刷分页:
function getDataByPage(pageIndex) { __isReSearch = false; __SearchCondition.PageIndex = pageIndex; search(); //这个方法会加载数据并调用onSearchSuccess方法
}