由于需求,要使用服务端分页,也就是点击下一页或者具体的页码来发送请求,显示某一页的数据,但问题就来了。当我连续点击下一页或者点击某一页它还在加载的时候我再点击别的页码,表格就会显示没有数据,下方的分页栏也会消失,过一会又会出现,并且显示这一页的数据。来看源码:
$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();
// }
});
当它请求成功以后,就会给我返回数据,失败就会给我返回结果为空,我不知道连续发两个请求为什么会导致第一个失败,原因暂时没找到,所以我暂时注释了失败的代码,问题解决了。暂时还没出现其他的连带问题,先就这样吧