jquery ajax 分页2
/*
* 分页 $("#divPager").flexipager
* 2015.03.17
*/ //初始化列表默认属性
(function($) {
$.addFlex = function(t, p) {
if (t.pager) return false; // 若已经存在Pager - DIV 对象则return
p = $.extend({
url: false, // 获取数据源对应的url地址
async: true, // 默认异步加载(false=同步)
method: 'POST', // 数据发送方式
dataType: 'json', // 数据加载的类型,json
page: 1, // 当前页
newp: 1, // 默认当前页
total: 1, // 总页面数
rp: 2, // 每页默认的结果数
sortname: "", // 排序字段
sortorder: "", // asc desc
primaryKey: "", // 主键字段名
coloursEvent: "" // 界面渲染
}, p); $(t).show().attr({ cellPadding: 0, cellSpacing: 0, border: 0 }).removeAttr('width'); var g = {
//分页
buildpager: function() {
// g.pDiv = document.createElement('div');
// g.pDiv.innerHTML = '<div class="pDiv2"></div>'; // alert($(g.pDiv).html());
// alert($(this.pDiv).html()); var html = "<span class='pFirst'>首页</span> <span class='pPrev'>上一页</span> <span class='pPageStatr'>1</span>/<span class='pTotal'>1</span> <span class='pNext'>下一页</span> <span class='pLast'>尾页</span> ";
html += "<span>共 </span><span class='rTotal'>0</span><span> 条记录</span> "; $(t).append(html); $('.pFirst', t).click(function() { g.changePage('first') });
$('.pPrev', t).click(function() { g.changePage('prev') });
$('.pNext', t).click(function() { g.changePage('next') });
$('.pLast', t).click(function() { g.changePage('last') });
this.populate();
},
//获取数据
populate: function() { if (p.page > p.pages)
p.page = p.pages; var param = [
{ name: 'page', value: p.newp }
, { name: 'rp', value: p.rp }
, { name: 'sortname', value: p.sortname }
, { name: 'sortorder', value: p.sortorder }
, { name: 'primaryKey', value: p.primaryKey } ]; $.ajax({
type: p.method,
url: p.url,
async: p.async,
data: param,
success: function(data) {
data = "[" + data + "]";
var page = eval(data)[0].page;
var total = eval(data)[0].total;
var json = eval(data)[0].rows; p.pages = Math.ceil(parseInt(total) / 2); $(".pTotal", t).html(p.pages); //页数
$(".rTotal", t).html(total); //总记录
$(".pPageStatr", t).html(p.page); //当前页 //alert(json);
if (p.coloursEvent)
p.coloursEvent(json); },
error: function(data) {
alert("error:");
try {
} catch (e) { alert("error:"); }
}
});
}, //翻页
changePage: function(ctype) {
//alert(ctype);
switch (ctype) {
case 'first':
//p.page = p.newp = 1;
p.newp = 1;
break;
case 'prev':
if (p.page > 1)
p.newp = parseInt(p.page) - 1;
break;
case 'next':
if (p.page < p.pages)
p.newp = parseInt(p.page) + 1;
break;
case 'last':
p.newp = p.pages;
break;
} if (p.newp == p.page)
return false; p.page = p.newp; this.populate();
}
}; g.buildpager();
t.p = p;
t.pager = g;
if (p.url && p.autoload) {
g.populate();
}
return t;
}; var docloaded = false; //文档加载完毕标识
$(document).ready(function() { docloaded = true });
var urlString = document.location.pathname; //当前页面的url
var huayingPageRpNum = urlString + "-huayingPageRpNum"; //设置当前页面的分页条数 //构造函数
$.fn.flexipager = function(p) {
return this.each(function() {
if (!docloaded) {
$(this).hide();
var t = this;
$(document).ready(function() { $.addFlex(t, p); });
} else {
$.addFlex(this, p);
}
});
}; })(jQuery);
var hyajax =
{
eventAjax: function() { },
executeAjax: function(requestType) {
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = hyajax.eventAjax
xmlhttp.open("")
}
}
<script src="ETOS_Js/Plugin/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="ETOS_Js/JsPager/JsPager.js" type="text/javascript"></script> <script type="text/javascript">
$(document).ready(function() { $("#divPager").flexipager({
url: "/Handlers/Topics.ashx?Action=Get_AnswerList",
sortname: "createTime",
sortorder: "desc",
coloursEvent: addData
}); }); function addData(json) {
alert(json + "");//返回一个json数据 在进行解析数据
} </script>
jquery ajax 分页2的更多相关文章
- 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- 分享一个手机端好用的jquery ajax分页类
分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...
- 12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
- jquery ajax分页写法
jquery ajax分页写法我用的是laypage插件 前端代码<pre> function demo(curr) { $.getJSON('/home/index/getinfo', ...
- 精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- Pagination jquery ajax 分页参考资料
http://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB% ...
- 12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- jquery+ajax分页
先看效果图:
- jquery ajax 分页
<script src="../Js/jQuery/jquery-1.8.2.min.js" type="text/javascript">< ...
随机推荐
- 蓝桥杯 算法训练 ALGO-122 未名湖边的烦恼
算法训练 未名湖边的烦恼 时间限制:1.0s 内存限制:256.0MB 问题描述 每年冬天,北大未名湖上都是滑冰的好地方.北大体育组准备了许多冰鞋,可是人太多了,每天下午收工后,常常一双冰鞋都 ...
- HDOJ1010 (DFS+奇偶剪枝)
Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- mybatis 学习五 动态SQL语句
3.1 selectKey 标签 在insert语句中,在Oracle经常使用序列.在MySQL中使用函数来自动生成插入表的主键,而且需要方法能返回这个生成主键.使用myBatis的selectKey ...
- Bresenham快速画直线算法
现在的计算机的图像的都是用像素表示的,无论是点.直线.圆或其他图形最终都会以点的形式显示.人们看到屏幕的直线只不过是模拟出来的,人眼不能分辨出来而已.那么计算机是如何画直线的呢,其实有比较多的算法,这 ...
- C Primer Plus学习笔记(八)- 函数
函数简介 函数(function)是完成特定任务的独立程序代码单元 使用函数可以省去编写重复代码的苦差,函数能让程序更加模块化,提高程序代码的可读性,更方便后期修改.完善 #include <s ...
- 【SymmetricDS】实现新的数据库方言
2018-04-20 by 安静的下雪天 http://www.cnblogs.com/quiet-snowy-day/p/8890785.html 本文翻译自SymmetricDS官方文档 I ...
- C#的颜色解析及操作和相关Brush
一.颜色表示方式 // // Summary: // Creates a System.Drawing.Color structure from a 32-bit ARGB value. // // ...
- ie6 ie7下报脚本错误"Expected identifier, string or number" 的原因和解决方法
在IE6和ie7里面,脚本报错"Expected identifier, string or number" 写下这个是个之前我已经很头疼了,因为我的代码在其他浏览器里都是正常的, ...
- 问题:oracle DECLARE 变量重复利用;结果:Oracle 定义变量总结
首先,当在cmd里办入scott密码提示错误时,可以这样改一下,scott的解锁命令是: 以system用户登录:cmdsqlplus system/tigertigeralter user scot ...
- 问题:sqlserver 跨服务器连接;结果:Sql Server 跨服务器连接
Sql Server 跨服务器连接 用openrowset连接远程SQL或插入数据 --如果只是临时访问,可以直接用openrowset --查询示例 select * from openrowset ...