加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

jQuery Ajax 实现分页 kkpager插件实例代码

发布时间:2020-12-15 23:17:15 所属栏目:百科 来源:网络整理
导读:代码片段一: 代码片段二: 代码片段三: 下面这段代码:在原版上修改过,由于ajax分页不能及时更新总页数 下面是插件kkpager.js代码: 57)return false; return true; },//跳转框页面跳转 gopage : function(){ var str_page = $('#'+this.gopageTextboxId)

代码片段一:

代码片段二:

$(function () {

  //----分页部分 代码片段一 开始----
  var totalPage = 20;//总共多少页
  var totalRecords = 200;//总共多少条
  var pagehref = window.location.href;
  var pageNo = GetQueryString('pno');
  if (!pageNo) {
    pageNo = 1;
  }
  //----分页部分 代码片段一 结束----

//----页面数据加载 并绑定生成分页 开始----
function LoadingGoods() {

    jQuery.ajax({
      url: 'baidu.com',type: "POST",dataType: "json",data: { '参数1': 1,'参数2': 2,'Page': pageNo,'Limit': 20 },success: function (result) {
        if (result.success) {
          var count = result.result;
          var data = result.data;
          totalRecords = count;
          totalPage = Math.ceil(count / 20);

          if (count > 0) {
            $(".commodity_volume").html("");
            var str = "";
            for (var i = 0; i < data.length; i++) {
              str += "<div class='commodity'></div>";
            }
            $(".commodity_volume").html(str);
          } else {
            $(".commodity_volume").html("");
            var str = "";
            str = "<div><center>没有查到您想要的数据。</center></div>"
            $(".commodity_volume").html(str);
          }
          //----分页部分 代码片段二 开始----
          kkpager.total = totalPage;
          kkpager.totalRecords = totalRecords;
          kkpager.generPageHtml({
            pno: pageNo,//总页码
            total: totalPage,//总数据条数
            totalRecords: totalRecords,//mode: 'click',//链接前部
            hrefFormer: pagehref,//链接尾部
            hrefLatter: '',//hrefLatter: '.html'
            getLink: function (n) {
              var hrefFormer = this.hrefFormer;
              var url = this.hrefFormer + "&pno=" + n;
              if (hrefFormer.indexOf("pno") > 0) {
                var pno = GetQueryString("pno");
                return this.hrefFormer.replace('pno=' + pno,'pno=' + n);
              } else {
                return url;
              }
            }
          });
          //----分页部分 代码片段二 结束----
          //----显示遮罩 开始----
          $('#AjaxLoading').hide()
          $(".showbox").stop(true).animate({ 'margin-top': '250px','opacity': '0' },400);
          $(".overlay").css({ 'display': 'none','opacity': '0' });
          //----显示遮罩 结束----
        }
      },error: function () {
        alert("请刷新后重试!")
      }
    });
  } 
  LoadingGoods();//加载商品列表
  //----页面数据加载 并绑定生成分页 结束---- 

}

代码片段三:

下面这段代码:在原版上修改过,由于ajax分页不能及时更新总页数

下面是插件kkpager.js代码:

57)return false; return true; },//跳转框页面跳转 gopage : function(){ var str_page = $('#'+this.gopageTextboxId).val(); if(isNaN(str_page)){ $('#'+this.gopageTextboxId).val(this.next); return; } var n = parseInt(str_page); if(n < 1) n = 1; if(n > this.total) n = this.total; if(this.mode == 'click'){ this._clickHandler(n); }else{ window.location = this.getLink(n); } },//不刷新页面直接手动调用选中某一页码 selectPage : function(n){ this._config['pno'] = n; this.generPageHtml(this._config,true); },//生成控件代码 generPageHtml : function(config,enforceInit){ if (enforceInit || !this.inited) { config.total = kkpager.total; config.totalRecords = kkpager.totalRecords; this.init(config); } var str_first='',str_prv='',str_next='',str_last=''; if(this.isShowFirstPageBtn){ if(this.hasPrv){ str_first = ''; }else{ str_first = ''; } } if(this.isShowPrePageBtn){ if(this.hasPrv){ str_prv = ''; }else{ str_prv = ''; } } if(this.isShowNextPageBtn){ if(this.hasNext){ str_next = ''; }else{ str_next = ''; } } if(this.isShowLastPageBtn){ if(this.hasNext){ str_last = ''; }else{ str_last = ''; } } var str = ''; var dot = ''; var total_info=''; if(this.isShowCurrPage){ total_info += this.lang.currPageBeforeText + '' + this.lang.currPageAfterText; if(this.isShowTotalPage){ total_info += total_info_splitstr; total_info += this.lang.totalPageBeforeText + '' + this.lang.totalPageAfterText; }else if(this.isShowTotalRecords){ total_info += total_info_splitstr; total_info += this.lang.totalRecordsBeforeText + '' + this.lang.totalRecordsAfterText; } }else if(this.isShowTotalPage){ total_info += this.lang.totalPageBeforeText + '' + this.lang.totalPageAfterText;; if(this.isShowTotalRecords){ total_info += total_info_splitstr; total_info += this.lang.totalRecordsBeforeText + '' + this.lang.totalRecordsAfterText; } }else if(this.isShowTotalRecords){ total_info += this.lang.totalRecordsBeforeText + '' + this.lang.totalRecordsAfterText; } total_info += ''; var gopage_info = ''; if(this.isGoPage){ gopage_info = ''+ ''+this.lang.gopageAfterText+''; } //分页处理 if(this.total <= 8){ for(var i=1;i<=this.total;i++){ if(this.pno == i){ str += ''; }else{ str += ''; } } }else{ if(this.pno <= 5){ for(var i=1;i<=7;i++){ if(this.pno == i){ str += ''; }else{ str += ''; } } str += dot; }else{ str += ''; str += ''; str += dot; var begin = this.pno - 2; var end = this.pno + 2; if(end > this.total){ end = this.total; begin = end - 4; if(this.pno - begin < 2){ begin = begin-1; } }else if(end + 1 == this.total){ end = this.total; } for(var i=begin;i<=end;i++){ if(this.pno == i){ str += ''; }else{ str += ''; } } if(end != this.total){ str += dot; } } } var pagerHtml = '
'; if(this.isWrapedPageBtns){ pagerHtml += '' }else{ pagerHtml += str_first + str_prv + str + str_next + str_last; } if(this.isWrapedInfoTextAndGoPageBtn){ pagerHtml += ''; }else{ pagerHtml += total_info + gopage_info; } pagerHtml += '
'; $("#"+this.pagerid).html(pagerHtml); },//分页按钮控件初始化 init : function(config){ this.pno = isNaN(config.pno) ? 1 : parseInt(config.pno); this.total = isNaN(config.total) ? 1 : parseInt(config.total); this.totalRecords = isNaN(config.totalRecords) ? 0 : parseInt(config.totalRecords); if(config.pagerid){this.pagerid = config.pagerid;} if(config.mode){this.mode = config.mode;} if(config.gopageWrapId){this.gopageWrapId = config.gopageWrapId;} if(config.gopageButtonId){this.gopageButtonId = config.gopageButtonId;} if(config.gopageTextboxId){this.gopageTextboxId = config.gopageTextboxId;} if(config.isShowFirstPageBtn != undefined){this.isShowFirstPageBtn=config.isShowFirstPageBtn;} if(config.isShowLastPageBtn != undefined){this.isShowLastPageBtn=config.isShowLastPageBtn;} if(config.isShowPrePageBtn != undefined){this.isShowPrePageBtn=config.isShowPrePageBtn;} if(config.isShowNextPageBtn != undefined){this.isShowNextPageBtn=config.isShowNextPageBtn;} if(config.isShowTotalPage != undefined){this.isShowTotalPage=config.isShowTotalPage;} if(config.isShowCurrPage != undefined){this.isShowCurrPage=config.isShowCurrPage;} if(config.isShowTotalRecords != undefined){this.isShowTotalRecords=config.isShowTotalRecords;} if(config.isWrapedPageBtns){this.isWrapedPageBtns=config.isWrapedPageBtns;} if(config.isWrapedInfoTextAndGoPageBtn){this.isWrapedInfoTextAndGoPageBtn=config.isWrapedInfoTextAndGoPageBtn;} if(config.isGoPage != undefined){this.isGoPage=config.isGoPage;} if(config.lang){ for(var key in config.lang){ this.lang[key] = config.lang[key]; } } this.hrefFormer = config.hrefFormer || ''; this.hrefLatter = config.hrefLatter || ''; if(config.getLink && typeof(config.getLink) == 'function'){this.getLink = config.getLink;} if(config.click && typeof(config.click) == 'function'){this.click = config.click;} if(config.getHref && typeof(config.getHref) == 'function'){this.getHref = config.getHref;} if(!this._config){ this._config = config; } //validate if(this.pno < 1) this.pno = 1; this.total = (this.total <= 1) ? 1: this.total; if(this.pno > this.total) this.pno = this.total; this.prv = (this.pno<=2) ? 1 : (this.pno-1); this.next = (this.pno >= this.total-1) ? this.total : (this.pno + 1); this.hasPrv = (this.pno > 1); this.hasNext = (this.pno < this.total); this.inited = true; },_getHandlerStr : function(n){ if(this.mode == 'click'){ return 'href="'+this.getHref(n)+'" rel="external nofollow" onclick="return kkpager._clickHandler('+n+')"'; } //link模式,也是默认的 return 'href="'+this.getLink(n)+'" rel="external nofollow" '; },_clickHandler : function(n){ var res = false; if(this.click && typeof this.click == 'function'){ res = this.click.call(this,n) || false; } return res; } };

下面是插件kkpager_blue.css代码:

总结

以上所述是小编给大家介绍的jQuery Ajax 实现分页 kkpager插件。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读