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">< ...
随机推荐
- element table固定表头,表的高度自适应解决方法
主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...
- 蓝桥杯 算法训练 ALGO-146 4-2找公倍数
算法训练 4-2找公倍数 时间限制:1.0s 内存限制:256.0MB 查看参考代码 问题描述 这里写问题描述. 打印出1-1000所有11和17的公倍数. 样例输入 一个满足题 ...
- 一些js和JQuery的方法
取值填值: js: get-- innerText, innerHTML, value; set-- innerText=?, innerHTML=?, value=?; JQuery: get-- ...
- Jconsole 测试.
Jconsole 测试. 1 下载并安装 d:\Program Files\Java\jdk1.8.0_111\ JDK自带,Windows下图形界面,监控分析Java程序 2 查看jmx进程号 [r ...
- linux 学习2 常用命令
1.显示日期的指令: date 2. [Tab]按键---具有『命令补全』不『档案补齐』的功能 3: su和 sudo su用于用户之间的切换. su在不加任何参数,默认为切换到root用户 ...
- IDEA 运行spingboot时出现Process finished with exit code -1073741819 (0xC0000005)
经过多方查证,问题最终定位在金山词霸2016上,如果开启了金山词霸的取词和划意功能,就会出现此错误,估计是冲突吧. 解决办法:关掉金山词霸,或者把金山词霸的取词和划意功能关掉.经过尝试,发现只要在ID ...
- PowerDesignerPDM中搜寻表名或字段名
Option Explicit ValidationMode = True InteractiveMode = im_Batch Dim mdl '当前model '获取当前活 ...
- 新建 FrameMaker API 时引用目录的设置
如果将FDK安装目录下的Sample项目拷贝到其它目录编译,往往会报错 c1083 找不到fapi.h等头文件,或者Link时报错找不到.lib文件. 1.可通过菜单-项目-xxx属性-配置属性-c/ ...
- 下拉框改变事件:获取下拉框中当前选择的文本 SelectionChanged事件
/// <summary> /// 下拉框改变事件:获取下拉框中当前选择的文本 /// </summary> /// <param name="sender&q ...
- 11-18网页基础--第二部分CSS样式属性(1)
第一课:样式属性 style 样式:style样式不仅可以直接在<body>中设置成整个网页的样式.格式:为了将样式.格式多样化,也可以将style单独抽出来,作为一个独立的个体,放在&l ...