Javascript Jquery引导网格插件双分页
我有个问题。我需要修改jQueryBootGrid插件,使其允许多种想象。也就是说,如果用户发送参数数组,如['top-left'、'bottom-left'],则bootgrid必须在bootgrid表的左上角和左下角同时进行分页 我创建了这个方法,我在其中添加了它们,但只有在同一行中添加2个,它在顶部创建空分页div,但在底部div中插入2个分页Javascript Jquery引导网格插件双分页,javascript,jquery,pagination,Javascript,Jquery,Pagination,我有个问题。我需要修改jQueryBootGrid插件,使其允许多种想象。也就是说,如果用户发送参数数组,如['top-left'、'bottom-left'],则bootgrid必须在bootgrid表的左上角和左下角同时进行分页 我创建了这个方法,我在其中添加了它们,但只有在同一行中添加2个,它在顶部创建空分页div,但在底部div中插入2个分页 Grid.prototype.setPaginationBar = function (params) { if
Grid.prototype.setPaginationBar = function (params) {
if (params[0] == "top-left") {
$('.table-responsive').prepend(this.footer);
var bar = $('.paginationBar');
$(bar).insertBefore('.infoBar');
$(bar).addClass('paginationBarLeft');
$(bar).removeClass('paginationBar');
}
else if (params[0] == "top-right") {
$('.table-responsive').prepend(this.footer);
}
else if (params[0] == "bottom-left") {
var bar = $('.paginationBar');
$(bar).insertBefore('.infoBar');
$(bar).addClass('paginationBarLeft');
$(bar).removeClass('paginationBar');
}
this.header = this.footer.clone();
$('.table-responsive').prepend(this.header);
};
我这样称呼这个方法
var params = ['bottom-right', 'bottom-left'];
$("#employee_grid").bootgrid("setPaginationBar", params);
这是bootgrid在mine方法之后调用的方法
function renderPagination() {
if (this.options.navigation !== 0) {
var selector = getCssSelector(this.options.css.pagination),
headerPagination = this.header.find(selector)._bgShowAria(this.rowCount !== -1),
footerPagination = this.footer.find(selector)._bgShowAria(this.rowCount !== -1);
if (this.rowCount !== -1 && (headerPagination.length + footerPagination.length) > 0) {
var tpl = this.options.templates,
current = this.current,
totalPages = this.totalPages,
pagination = $(tpl.pagination.resolve(getParams.call(this))),
offsetRight = totalPages - current,
offsetLeft = (this.options.padding - current) * -1,
startWith = ((offsetRight >= this.options.padding) ?
Math.max(offsetLeft, 1) :
Math.max((offsetLeft - this.options.padding + offsetRight), 1)),
maxCount = this.options.padding * 2 + 1,
count = (totalPages >= maxCount) ? maxCount : totalPages;
renderPaginationItem.call(this, pagination, "first", "«", "first")
._bgEnableAria(current > 1);
renderPaginationItem.call(this, pagination, "prevPage", "<", "prevPage")
._bgEnableAria(current > 1);
for (var i = 0; i < count; i++) {
var pos = i + startWith;
renderPaginationItem.call(this, pagination, pos, pos, "page-" + pos)
._bgEnableAria()._bgSelectAria(pos === current);
}
if (count === 0) {
renderPaginationItem.call(this, pagination, 1, 1, "page-" + 1)
._bgEnableAria(false)._bgSelectAria();
}
renderPaginationItem.call(this, pagination, "nextPage", ">", "nextPage")
._bgEnableAria(totalPages > current);
renderPaginationItem.call(this, pagination, "last", "»", "last")
._bgEnableAria(totalPages > current);
replacePlaceHolder.call(this, headerPagination, pagination, 1);
replacePlaceHolder.call(this, footerPagination, pagination, 2);
//Pagination ADA fix
paginationADA();
}
}
}
函数renderPagination(){
如果(this.options.navigation!==0){
var selector=getCssSelector(this.options.css.pagination),
headerPagination=this.header.find(选择器)。\u bgShowAria(this.rowCount!=-1),
footerPagination=this.footer.find(选择器)。\u bgShowAria(this.rowCount!=-1);
如果(this.rowCount!=-1&&(headerPagination.length+footerPagination.length)>0){
var tpl=this.options.templates,
current=this.current,
totalPages=this.totalPages,
pagination=$(tpl.pagination.resolve(getParams.call(this)),
offsetRight=总页数-当前,
offsetLeft=(this.options.padding-current)*-1,
startWith=((offsetRight>=this.options.padding)?
最大值(偏移量,1):
max((offsetLeft-this.options.padding+offsetlight),1)),
maxCount=this.options.padding*2+1,
计数=(totalPages>=maxCount)?maxCount:totalPages;
renderPaginationItem.call(这是分页,“第一”,“第一”,“第一”)
(当前>1);
renderPaginationItem.call(此,分页,“prevPage”、“prevPage”、“prevPage”)
(当前>1);
对于(变量i=0;i当前页数);
renderPaginationItem.call(这是分页,“last”、“»;”和“last”)
(总页数>当前页数);
调用(this,headerPagination,pagination,1);
调用(this,footerPagination,pagination,2);
//分页ADA固定
分页数据();
}
}
}
如果有人能帮助我,我将不胜感激,因为我不知道如何使bootgrid具有多个分页,一个在顶部,一个在底部通过在网格初始化后调用该方法修复了这个问题
}).on("loaded.rs.jquery.bootgrid", function () {
/* Executes after data is loaded and rendered */
var params = ['top-right', 'bottom-right'];
$("#employee_grid").bootgrid("setPaginationBar", params);
Ladda.stopAll();
//Delete
这是我在开发者工具中得到的,顶部页脚满是分页项,底部页脚在那里,但为空