bootstrap-table服务端分页连续点击下一页分页栏消失

由于需求,要使用服务端分页,也就是点击下一页或者具体的页码来发送请求,显示某一页的数据,但问题就来了。当我连续点击下一页或者点击某一页它还在加载的时候我再点击别的页码,表格就会显示没有数据,下方的分页栏也会消失,过一会又会出现,并且显示这一页的数据。来看源码:

 $pageList.off('click').on('click', function (e) {
	          return _this6.onPageListChange(e);
	        });
	        $pre.off('click').on('click', function (e) {
	          return _this6.onPagePre(e);
	        });
	        $next.off('click').on('click', function (e) {
	          return _this6.onPageNext(e);
	        });
	        $number.off('click').on('click', function (e) {
	          return _this6.onPageNumber(e);
	        });

这四个单击事件分别是选择每页显示多少条数,上一页,下一页,具体的页码,
下面是点击事件的方法,只放一个下一页的吧

 {
	    key: "onPageNext",
	    value: function onPageNext(event) {
	      event.preventDefault();

	      if (this.options.pageNumber + 1 > this.options.totalPages) {
	        this.options.pageNumber = 1;
	      } else {
	        this.options.pageNumber++;
	      }

	      this.updatePagination(event);
	      return false;
	    }
	  }

在最后会执行一个updatePagination的方法,如下:

 {
	    key: "updatePagination",
	    value: function updatePagination(event) {
	      // Fix #171: IE disabled button can be clicked bug.
	      if (event && $(event.currentTarget).hasClass('disabled')) {
	        return;
	      }

	      if (!this.options.maintainMetaData) {
	        this.resetRows();
	      }

	      this.initPagination();

	      if (this.options.sidePagination === 'server') {
	        this.initServer();
	      } else {
	        this.initBody();
	      }

	      this.trigger('page-change', this.options.pageNumber, this.options.pageSize);
	    }
	  }

因为我是服务端分页,所以后面会执行this.initServer()方法,在这个方法中,我看到了这个:

 var request = $.extend({}, Utils.calculateObjectValue(null, this.options.ajaxOptions), {
	        type: this.options.method,
	        url: url || this.options.url,
	        data: this.options.contentType === 'application/json' && this.options.method === 'post' ? JSON.stringify(data) : data,
	        cache: this.options.cache,
	        contentType: this.options.contentType,
	        dataType: this.options.dataType,
	        success: function success(_res) {
	          var res = Utils.calculateObjectValue(_this9.options, _this9.options.responseHandler, [_res], _res);

	          _this9.load(res);

	          _this9.trigger('load-success', res);

	          if (!silent) {
	            _this9.hideLoading();
	          }
	        },
	        // error: function error(jqXHR) {
	        //   var data = [];
			//
	        //   if (_this9.options.sidePagination === 'server') {
	        //     data = {};
	        //     data[_this9.options.totalField] = 0;
	        //     data[_this9.options.dataField] = [];
	        //   }
			//
	        //   _this9.load(data);
			//
	        //   _this9.trigger('load-error', jqXHR.status, jqXHR);
			//
	        //   // if (!silent) _this9.$tableLoading.hide();
	        // }
	      });

当它请求成功以后,就会给我返回数据,失败就会给我返回结果为空,我不知道连续发两个请求为什么会导致第一个失败,原因暂时没找到,所以我暂时注释了失败的代码,问题解决了。暂时还没出现其他的连带问题,先就这样吧

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值