jquery.pagination.js数据无刷新真分页
2024-08-23 06:14:29
定义一个全局的分页加载变量,并设置为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方法
}
最新文章
- 在Heroku上,安装Wordpress
- 【BZOJ-1941】Hide and Seek KD-Tree
- 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片
- GoldenGate 基础架构
- (DDD)仓储的思考
- ng-book札记——依赖注入
- Hadoop:Hadoop基本命令
- 扒一拔:Java 中的泛型(一)
- MySQL :: Fatal error: Can&;#039;t change to run as user &;#039;mysql&;#039;. Please check that the user exists!
- android用户信息保存
- BZOJ4170:极光(CDQ分治)
- dts中memreserve和reserved-memory的区别 (转)
- 浅议APC
- Centos7部署kubernetes-ETCD集群(三)
- java 通过异常处理错误
- Activiti工作流笔记(2)
- WebRTC内置debug工具,详细参数解读 chrome://webrtc-internals/
- Xcode6:解决_NSURLAuthenticationMethodServerTrust异常问题
- JVM的类加载时机
- ES6的新特性(4)——字符串的扩展
热门文章
- LINQ 学习路程 -- 查询操作 ThenBy &; ThenByDescending
- 大话设计模式--模板方法模式 TemplateMethod -- C++ 实现
- linux 各个文件系统之间的关系
- Jackson的用法实例分析
- 【Educational Codeforces Round 37】F. SUM and REPLACE 线段树+线性筛
- pyget-资源与标签(Sprite、Label、Font)
- VC用MCI播放mp3等音乐文件
- BZOJ4976: [Lydsy1708月赛]宝石镶嵌
- LOJ2722 「NOI2018」情报中心
- 使用 Anthem.NET 框架的一个调试经历