laypage前端分页插件实现ajax异步分页

 更新时间:2016年05月19日 15:29:39   作者:刚刚什么也没说  
layPage是一款多功能的js分页组件,即适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载,并且可无缝迁移至Node.js平台,这篇文章主要介绍了laypage前端分页插件,实现ajax异步分页,需要的朋友可以参考下

本文实例为大家分享了laypage前端分页插件,ajax异步分页,获取json数据实现无刷新分页,供大家参考,具体内容如下

function GetList(pageIndex) {
      var _this = ""
      var clone_this = "";
      _this = $(".BindDataList");//数据列表容器,
      clone_this = _this.clone(true);
      var pageSize = 25;//每页展示的条数
      $.ajax({
        type: "get",
        async: false,//异步锁定,默认为true
        url: "../ashx/System/DefaultAjax.ashx",//后端处理数据,返回json格式
        data: {"pageIndex": pageIndex, "pageSize": pageSize, },
        contentType: "application/json; charset=utf-8",
        success: function (data) {
          var json = eval("(" + data + ")");
          if (json.PageCount > 0) //数据总条数
           {
            _this.html("");
            for (var i = 0; i < json.rows.length ; i++) {
              var html = "<li>json数据</li>";
              _this.append(html);
            }
            jsonpage(json, pageIndex, pageSize);
          }
          else {
            _this.html("");
            _this.append("");
          }
        }
      });
    }
 
function jsonpage(json, pageIndex, pageSize) {
      var coun = json.PageCount;//总数据条数
      var pagecount = coun % pageSize == 0 ? coun / pageSize : coun / pageSize + 1;//计算多少页
      var laypageindex = laypage({
        cont: 'project_page', //容器。值支持id名、原生dom对象,jquery对象。
        skin: '#fb771f',
        pages: pagecount, //通过后台拿到的总页数
        curr: pageIndex, //初始化当前页
        first: '|<', //将首页显示为数字1,。若不显示,设置false即可
        last: '>|', //将尾页显示为总页数。若不显示,设置false即可
        prev: '<', //若不显示,设置false即可
        next: '>', //若不显示,设置false即可
        jump: function (obj, first) { //触发分页后的回调
          if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr
            SearchHotTag(obj.curr);
          }
        }
      });
    }

以上就是本文的全部内容,希望对大家学习laypage分页插件有所启发和帮助,谢谢大家的阅读。

相关文章

  • Ajax 实现加载进度条

    Ajax 实现加载进度条

    本文给大家介绍ajax实现加载进度条效果,非常不错,具有参考借鉴价值,需要的朋友参考下
    2016-12-12
  • Ajax传递中文参数到后台乱码的有效解决方法

    Ajax传递中文参数到后台乱码的有效解决方法

    使用Ajax传递中文参数,如果不对参数进行处理的话,传到后台会变成乱码,解决方法很简单,需要的朋友可以参考下本文
    2014-05-05
  • iframe实现Ajax文件上传效果示例

    iframe实现Ajax文件上传效果示例

    Ajax文件上传效果实现的方法有很多,在本文将为大家介绍下使用iframe是如何实现的,感兴趣的朋友不要错过
    2013-12-12
  • 强烈推荐-ajax开发者必看的文章

    强烈推荐-ajax开发者必看的文章

    强烈推荐-ajax开发者必看的文章...
    2007-03-03
  • 聊一聊Ajax的优缺点

    聊一聊Ajax的优缺点

    和大家一起聊一聊Ajax的优缺点,Ajax是一个动态的WEB应用的开发技术,它的出现丰富了用户的体验,今天就和大家进一步的了解Ajax,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 用Ajax读取xml文件的简单例子

    用Ajax读取xml文件的简单例子

    Ajax的原理很简单,就是在客户端创建一个XMLHttpRequest对象(用来与服务器进行异步通信,这就是Ajax的核心,其实我们早就在用异步通信了,只是没把这项技术用在网页设计中而已),为该对象的onreadystatechange 属性添加一个事件,当对象的readyState改变的时候就会引发指定的事件。
    2008-04-04
  • Ajax与mysql数据交互实现留言板功能

    Ajax与mysql数据交互实现留言板功能

    最近自己做了一个小demo,实现了Ajax与MySQL的数据交互,js部分用的是jq,后台用的是PHP,数据库是mysql,下面通过本文给大家详细介绍下
    2016-12-12
  • 快速解决ajax请求出错状态码为0的问题

    快速解决ajax请求出错状态码为0的问题

    下面小编就为大家分享一篇快速解决ajax请求出错状态码为0的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • ajax从JSP传递对象数组到后台的方法

    ajax从JSP传递对象数组到后台的方法

    今天小编就为大家分享一篇ajax从JSP传递对象数组到后台的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • ajax实现标签导航

    ajax实现标签导航

    ajax实现标签导航...
    2006-11-11

最新评论