jquery.pagination.js数据无刷新真分页
定义一个全局的分页加载变量,并设置为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方法
}
jquery.pagination.js数据无刷新真分页的更多相关文章
- ajax分页2:jquery.pagination +JSON 动态无刷新分页
静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- jquery.pagination +JSON 动态无刷新分页
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs& ...
- jquery+jquery.pagination+php+ajax 无刷新分页
<!DOCTYPE html> <html ><head><meta http-equiv="Content-Type" content= ...
- input ,button, textarea 1)使用disabled , 2) 显示值, 3) 表单提交. 4) jquery.form.js ajaxSubmit() 无刷新ajax提交表单.
1.使用disabled input , button textarea 可以 被 禁用, 禁用的效果 : 1) 上面的点击事件无法使用 --- button : 下面的 onclick ...
- 无刷新分页 jquery.pagination.js
无刷新分页 jquery.pagination.js 采用Jquery无刷新分页插件jquery.pagination.js实现无刷新分页效果 1.插件参数列表 http://www.dtan.so ...
- ajax分页实现,jquery.pagination.js
1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代 ...
- js jquery.pagination.js分页
1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css( ...
- [转]jquery.pagination.js分页
本文转自:http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html 序言 这一款js分页使用起来很爽,自己经常用,做项目时 ...
- 本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如 ...
随机推荐
- django使用bootstrap前端框架
一.下载bootstrap相关文件,放在项目目录中.在blog 应用中新建static目录,bootstrap文件放在此目录下. bootstrap下载网址:http://v3.bootcss.com ...
- 分享知识-快乐自己:Spring切入点的表达式和通知类型
1.切入点的表达式 表达式格式: execution([修饰符] 返回值类型 包名.类名.方法名(参数)) 其他的代替: <!-- 完全指定一个方法 --> <!-- <aop ...
- jQuery中的动画理论干货
[jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法]1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于在 ...
- 关于c++中命名空间namespace
一.定义命名空间: 步骤一:在.h文件中:namespace ns{.......}//将定义的类和全局变量,全局函数写入花括号内. 步骤二:在.cpp文件中: using namespace ns ...
- leetcode 2 Add Two Numbers(链表)
数字反过来这个没有什么麻烦,就是镜像的去算十进制加法就可以了,然后就是简单的链表. /** * Definition for singly-linked list. * struct ListNode ...
- windows 10 安装 spark 环境(spark 2.2.1 + hadoop2.7)
安装步骤基本参考 Spark在Windows下的环境搭建.不过在安装新版本 spark2.2.1(基于 hadoop2.7)的配置时,略略有一些不同. 1. sqlContext => spar ...
- 不要使用Android Studio的Git Commit了---->记一次debug
今天下午写了一些代码,吃晚饭时分用Android Studio commit了一下,不知道有没有选择Commit and push,结果刚才代码出bug我想回滚到上个版本的时候,发现Android S ...
- BZOJ4003:[JLOI2015]城池攻占
浅谈左偏树:https://www.cnblogs.com/AKMer/p/10246635.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php? ...
- Ubuntu18.04安装Docker, centos7安装Docker
Ubuntu18.04安装Docker 第一种方法从Ubuntu的仓库直接下载安装: 安装比较简单,这种安装的Docker不是最新版本,不过对于学习够用了,依次执行下面命令进行安装. $ sudo a ...
- 电脑当路由使用(目前只在win7上用过)
前提:电脑有无线网卡,并打开了无线 第一步使用管理员权限运行cmd.exe 1.执行如下命令 netsh wlan set hostednetwork mode=allow ssid=myWifi k ...