ajax局部刷新分页
//请求数据加载绑定页面
function DindAjax(pageIndex) {
//获取参数
var colors = $("#colorsVal").val();
$.ajax({
url: '/Ajax/muban/AjaxHandler.ashx',
type: 'POST',
data: 'ajaxType=pagelist&pageSize=40&pageIndex=' + pageIndex+ '&colors=' + colors,
dataType: 'json',
async: false,
timeout: 6000,
error: function () { },
success: function (obj) {
result1 = eval(obj)[0];
result2 = eval(obj).splice(1, obj.length);
//有数据
if (result1.pagenum > 0) {
$(".content-nolist").hide();
$(".nolist-tj").hide();
$(".back-top").hide();
$(".fy-auto").html(pagesizelist(result1.pageIndex, result1.pagenum));
} else {
$(".nolist-tj").show();
$(".content-nolist").html(result1.result).show();
$(".fy-auto").html("");
$(".back-top").show();
}
}
});
if (result2 != null) {
firstLists = [];
newLists = [];
getJson(result2);
index = 0;
setBox(firstLists);
$('.content-lists').hide();
$('.loading').show();
imagesLoaded(document.querySelector('#masonry'), function (instance) {
imgLoad($('#masonry'));
$('.content-lists').show();
$('.loading').hide();
});
}
}
//列表绑定分页
function pagesizelist(pageIndex, pagenum) {
var i = 0;
//当前页码
var pageIndex = parseInt(pageIndex);
//查询的数据总记录
var pagenum = parseInt(pagenum);
var pagehtml = '<a class="prev ' + (pageIndex == 1 ? 'no-check' : '') + '" href="javascript:void(0);" ' + (pageIndex == 1 ? '' : 'onclick="DindAjax(' + (pageIndex - 1) + ')"') + '><i class="iconfont"></i></a>';
//默认显示分页按钮数量
var indexsize = 5;
//分页中间值偏右
var indexleft = Math.ceil(indexsize / 2);
//分页按钮起始值
var smor = 0;
//分页按钮结束值
var big = 0;
//判断分页数量和总数据量
if (pagenum > indexsize) {
smor = pageIndex < indexleft ? 0 : ((pageIndex - indexleft) >= (pagenum - indexsize) ? (pagenum - indexsize) : (pageIndex - indexleft));
big = pageIndex < indexleft ? indexsize : (pageIndex == pagenum ? pageIndex : (pageIndex + ((pagenum - pageIndex) >= (indexsize - indexleft) ? (indexsize - indexleft) : (pagenum - pageIndex))));
} else {
smor = 0;
big = pagenum;
}
for (i = smor; i < big; i++) {
if (pageIndex == (i + 1)) {
pagehtml += " <span>" + pageIndex + "</span>";
} else {
pagehtml += "<a href=\"javascript:void(0)\" onclick=\"DindAjax('" + (i + 1) + "')\">" + (i + 1) + "</a>";
}
}
pagehtml += '<a class="prev ' + ((pageIndex + 1) > pagenum ? 'no-check' : '') + '" href="javascript:void(0);" ' + ((pageIndex + 1) > pagenum ? '' : 'onclick="DindAjax(' + (pageIndex + 1) + ')"') + '><i class="iconfont"></i></a>';
pagehtml += ' <div class="fl"><b>共' + pagenum + '页</b> <b>到第</b><input onkeypress="if(event.keyCode==13){ pageValue(' + pagenum + ')};" onkeyup="javascript:value=value.replace(/[^0-9]/g,"");" id="text_default" value="' + pageIndex + '" /><b>页</b></div><button class="logobutton" onclick=\"pageValue(' + pagenum + ')">确定</button>';
return pagehtml;
}
function pageValue(pagenum) {
var num = $("#text_default").eq(0).val() >= pagenum ? pagenum : $("#text_default").eq(0).val();
DindAjax(num);
}
ajax局部刷新分页的更多相关文章
- ajax局部刷新
//5秒刷新一次 $(function () { setInterval(Refresh, 5000); }); //ajax局部刷新 function Refresh() { $.ajax({ ty ...
- ajax 无刷新分页
//ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- php Ajax 局部刷新
php Ajax 局部刷新: HTML部分 </head> <body> <h1>Ajax动态显示时间</h1> <input type=&quo ...
- 关于Ajax无刷新分页技术的一些研究 c#
关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...
- thinkphp下实现ajax无刷新分页
1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
- thickbox关闭子页后ajax局部刷新父页
1. 首先注意需要调用thickbox的js <script type="text/javascript" src="<%=path%>/js/jque ...
- 学习笔记之AJAX无刷新分页
利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...
- 实现AJAX局部刷新以及PageMethod方法的使用
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
随机推荐
- Code First 数据注释--DatabaseGenerated
EF中可以使用DatabaseGenerated设置数据库字段的属性,它有三个枚举值:Computed.None.Identity Computed 表示这一列是计算所得 None 不做处理 Iden ...
- Ubuntu 12.04.5 LTS 上安装hadoop 2.6.0后运行自带的例程wordcount
注:我所有的操作均通过Xshell 5远程连接Ubuntu进行实施 第一步:启动hadoop,利用jps查看hadoop是否已经启动,如果没有启动用start-dfs.sh脚本启动(hadoop2.X ...
- sharding的基本思想和理论上的切分策略
本文着重介绍sharding的基本思想和理论上的切分策略,关于更加细致的实施策略和参考事例请参考我的另一篇博文:数据库分库分表(sharding)系列(一) 拆分实施策略和示例演示 一.基本思想 Sh ...
- 3 linux、windows环境---路径分隔符不同导致的问题
问题:通常在eclipse,IntelliJ IDEA等进行代码编写时,程序中用到路径通常采用/job/test.properties或D:/job/test.properties等是形式作为文件路径 ...
- ubuntu下安装postgres
PostgreSQL 是一款强大的,开源的,对象关系型数据库系统.它支持所有的主流操作系统,包括 Linux.Unix(AIX.BSD.HP-UX,SGI IRIX.Mac OS.Solaris.Tr ...
- asp.net mvc4 easyui datagrid 增删改查分页 导出 先上传后导入 NPOI批量导入 导出EXCEL
效果图 数据库代码 create database CardManage use CardManage create table CardManage ( ID ,) primary key, use ...
- Android-3 Activity启动模式
Activity启动模式 android:launchMode="singleTask" * Standard 每次都创建一个新实例 -- TaskID不变,ActivityID改 ...
- Bitly缩短网址服务 - Blog透视镜
网站的网址过长或是含有非英文或数字符号,会导致在BBS或者微网志中分享给好友时,产生很多的不方便,Bitly是个缩短网址服务的网站,提供1个短网址转向指定到长网址,免费使用且提供统计报表,例如本篇文章 ...
- USB 各型插座插头引脚分布
最近画USB的电路,老是忘记它的引脚排列,每次都要去翻手册,很麻烦,索性整理了一下,以后用着也方便,这些图都来自USB标准上. 注:以下均为插座或插头的前视图,即将插座或插头面向自己. USB A型插 ...
- KEILC51可重入函数及模拟栈浅析
MARK:文章中的红色部分是个人的理解. KEILC51可重入函数及模拟栈浅析 关键字:keilc51,模拟堆栈,可重入函数调用,参数传递,C?XBP,C?ADDXBP 摘要:本文较详细的介绍了kei ...