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来完成用户的体验,现在我们就来说说如 ...
随机推荐
- html编辑器的调用
<html><head> <metahttp-equiv="Content-type"content="text/html; cha ...
- Hessian 序列化和反序列化实现
先聊聊 Java的序列化,Java官方的序列化和反序列化的实现被太多人吐槽,这得归于Java官方序列化实现的方式. 1.Java序列化的性能经常被吐槽.2.Java官方的序列化后的数据相对于一些优秀的 ...
- Thinkphp跨模块调用视图文件
当需要跨模块调用视图文件时,需要使用被包含文件的完整路径,如: <include file="./App/Home/View/Store/header.html"/> ...
- 英语发音规则---ea字母组合发音规律
英语发音规则---ea字母组合发音规律 一.总结 一句话总结:字母组合ea的发音规律,在学习字母组合在单词中的发音规律以前,一定要熟练撑握什么是开音节,什么是闭音节,否则你就不撑握这些发音规律. ea ...
- 一 Django框架介绍——用pycharm创建Django项目
Django框架介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...
- 4 Python 日期和时间
Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 calendar 模块可以用于格式化日期和时间. 时间间隔是以秒为单位的浮点小数. ...
- CH#24C 逃不掉的路 和 HDU3686 Traffic Real Time Query System
逃不掉的路 CH Round #24 - 三体杯 Round #1 题目描述 现代社会,路是必不可少的.任意两个城镇都有路相连,而且往往不止一条.但有些路连年被各种XXOO,走着很不爽.按理说条条大路 ...
- bzoj 1113 海报pla
Description N个矩形,排成一排. 现在希望用尽量少的矩形海报Cover住它们. Input 第一行给出数字N,代表有N个矩形.N在[1,250000] 下面N行,每行给出矩形的长与宽.其值 ...
- QT(4)信号与槽
mainWidget.h #ifndef MAINWIDGET_H #define MAINWIDGET_H #include <QWidget> #include <QPushBu ...
- gradle项目搭建
一.gradle安装 1.安装JDK,这个就不用说了 2.下载gradle发布文件,下载地址:http://gradle.org/gradle-download/可以下载完整版或者简洁版都可以 3.解 ...