//请求数据加载绑定页面
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,&quot;&quot;);" 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局部刷新分页的更多相关文章

  1. ajax局部刷新

    //5秒刷新一次 $(function () { setInterval(Refresh, 5000); }); //ajax局部刷新 function Refresh() { $.ajax({ ty ...

  2. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

  3. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  4. php Ajax 局部刷新

    php Ajax 局部刷新: HTML部分 </head> <body> <h1>Ajax动态显示时间</h1> <input type=&quo ...

  5. 关于Ajax无刷新分页技术的一些研究 c#

    关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...

  6. thinkphp下实现ajax无刷新分页

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

  7. thickbox关闭子页后ajax局部刷新父页

    1. 首先注意需要调用thickbox的js <script type="text/javascript" src="<%=path%>/js/jque ...

  8. 学习笔记之AJAX无刷新分页

    利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...

  9. 实现AJAX局部刷新以及PageMethod方法的使用

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

随机推荐

  1. WndProc函数(转)

    WndProc函数作用: 主要用在拦截并处理系统消息和自定义消息 比如:windows程序会产生很多消息,比如你单击鼠标,移动窗口都会产生消息.这个函数就是默认的消息处理函数.你可以重载这个函数来制定 ...

  2. linux环境下jdk 安装以及maven私服搭建

    1:准备资源      linux服务器,jdk和nexus  安装包    2:网络通畅,保持windows端和linux服务器端网络通畅.     3: 安装jdk和配置环境变量      进入到 ...

  3. IP地址变动后,https://localhost:1158/em无法访问解决办法

    一.解决的方法:重新配置em 二.步骤: 1.在 dos命令下输入 emca –repos drop 注意:监听端口号是一般是1521,特殊情况要在配置文件中找 2.成功删除资料档案库后,在dos下再 ...

  4. 从字节理解Unicode(UTF8/UTF16)

    如果你不知道或者不了解什么是Unicode/UTF8/UTF16,请详细阅读这篇文章(这也是这篇博文的先决条件): 学点编码知识又不会死:Unicode的流言终结者和编码大揭秘 但是如果你看完以上文章 ...

  5. (一)原生JS实现 - 基本类方法

    类 var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } ...

  6. BZOJ4006 JLOI2015 管道连接(斯坦纳树生成森林)

    4006: [JLOI2015]管道连接 Time Limit: 30 Sec Memory Limit: 128 MB Description 小铭铭最近进入了某情报部门,该部门正在被如何建立安全的 ...

  7. html label 标签的 for 属性

    如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上. 有两种使用方法: 方法1 使用for属性 <label for ...

  8. (原+转)ubuntu终端输出彩色文字

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6066697.html 参考网址: http://www.tuicool.com/articles/jI ...

  9. 1170: 非常男女(XCOJ 前缀和)

    1170: 非常男女 时间限制: 1 Sec  内存限制: 128 MB提交: 22  解决: 9 标签提交统计讨论版 题目描述 Matrix67已经当过多次“媒人”了.他因此获得了许多经验.例如,距 ...

  10. Codeforces 571B Minimization

    http://codeforces.com/problemset/problem/571/B 给出一个序列,可以任意调整序列的顺序,使得给出的式子的值最小 思路:我们可以把序列分解,变成k条链,n%k ...