• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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分页插件有所启发和帮助,谢谢大家的阅读。

    您可能感兴趣的文章:
    • laypage.js分页插件使用方法详解
    • layui2.0使用table+laypage实现真分页
    • 基于layPage插件实现两种分页方式浅析
    • thinkPHP3.2.3结合Laypage实现的分页功能示例
    • thinkPHP5使用laypage分页插件实现列表分页功能
    • 基于LayUI分页和LayUI laypage分页的使用示例
    • VUEJS实战之利用laypage插件实现分页(3)
    • laypage分页控件使用实例详解
    • js多功能分页组件layPage使用方法详解
    • laypage+SpringMVC实现后端分页
    上一篇:ajax文件上传成功 解决浏览器兼容问题
    下一篇:纯javascript的ajax实现php异步提交表单的简单实例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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