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">< ...
随机推荐
- STL容器共性机制和使用场景
一.STL容器共性机制 STL容器所提供的都是值(value)寓意,而非引用(reference)寓意,也就是说当我们给容器中插入元素的时候,容器内部实施了拷贝动作,将我们要插入的元素再另行拷贝一份放 ...
- Hive的JDBC访问引发的Maven依赖的实践
invalid LOC header (bad signature) 原来是因为依赖问题,直接依赖“hive-server”的见解依赖jetty-all有冲突:诡异的是在main方法中执行是OK的,但 ...
- gitlab init project
Command line instructions Git global setup git config --global user.name "zxpo" git config ...
- bae3.0第三步 添加默认管理后台模块和mysql库
1.创建数据库 先在本地的mysql数据库中创建数据库db_blog,执行python manage.py syncdb来创建表. 然后将数据库中的表导入到bae上的数据库中.2.配置数据库 修改项目 ...
- check: 获得所有呗选中的checked标签的元素值 mapArrayElement(arrEles)
首先引用: <script src="../js/myjs/mapArrayElement.js"></script> 然后在<javascript& ...
- 获取APK的package名和activity名
使用 aapt dump badging + 需要安装的APK
- 第15届浙江省赛 D Sequence Swapping(dp)
Sequence Swapping Time Limit: 1 Second Memory Limit: 65536 KB BaoBao has just found a strange s ...
- 基于mjpg-streamer网络视频服务器移植
MJPG简介: MJPG是MJPEG的缩写,但是MJPEG还可以表示文件格式扩展名. MJPEG 全名为 "Motion Joint Photographic Experts Group&q ...
- delphi 在线程中运行控制台命令(console)
在编程开发的时候,我们时常会调用windows本身的功能,如:检测网络通断,连接无线wifi等. 虽然,用 windows api 操作可以完美地完成这些操作,但是,函数参数太难了.令人望而生畏,不是 ...
- 如何Catalog磁带库中的备份集
在NBU备份的环境中,可以使用以下步骤来Catalog磁带库中的备份集. 1. 查找需要Catalog的备份集名称 可以使用两种方法查找Oracle备份集. 方法一是使用RMAN的list命令查找,例 ...