Bootstrap table и pagination pagination plugin первая страница последняя страница

Question

У меня есть следующий загрузочный плагин для разбиения на страницы строк/элементов таблицы.

Bootply example

С текущей версии я могу перейти к предыдущей и следующей странице (одна страница сразу же), как можно реализовать еще две кнопки < первый и последний >, который будет идти в первую или последнюю страницу в пагинацией ?

Другое дело, когда я просматриваю последние страницы и нажимаю любую из последних страниц, тогда в представлении больше не отображается количество страниц, а вместо одной отдельной страницы. Он должен всегда показывать количество страниц, заданных в настройках. Если у меня 20 страниц, и я хочу видеть по 5 страниц за раз, когда я иду в конец 17 18 19 20 и нажимаю на любую из них, то я не могу видеть последние пять, а вместо этого только тот, который я нажал.

Answer 1

Я надеюсь, что это вам поможет. Я создал функцию first(), которая заставит вас перейти на первую страницу (по индексу 0), а также функцию last(), которая переводит вас на страницу индекса [numberofPages -1]. Я также включил собственный код ur из собственного ответа, который разрешает проблему с последними страницами, не отображающими все элементы, которые вы хотите. Вы также можете захотеть, чтобы первая и последняя ссылка скрывались, когда вы находитесь на краю обеих сторон, но это зависит от вас.

Также я включил новый параметр showFirstLast: который позволяет вам скрыть эти кнопки. И немного изменилось, как активный класс добавляется к кнопкам, потому что структура изменилась с помощью новой кнопки спереди, чтобы убедиться, что она отображает активную страницу правильно. Вы можете проверить его здесь http://bootply.com/93579

$.fn.pageMe = function(opts){ 
var $this = this, 
    defaults = { 
     perPage: 7, 
     showPrevNext: false, 
     numbersPerPage: 5, 
     hidePageNumbers: false, 
     showFirstLast: true 
    }, 
    settings = $.extend(defaults, opts); 

var listElement = $this; 
var perPage = settings.perPage; 
var children = listElement.children(); 
var pager = $('.pagination'); 

if (typeof settings.childSelector!="undefined") { 
    children = listElement.find(settings.childSelector); 
} 

if (typeof settings.pagerSelector!="undefined") { 
    pager = $(settings.pagerSelector); 
} 

var numItems = children.size(); 
var numPages = Math.ceil(numItems/perPage); 

pager.data("curr",0); 

if (settings.showFirstLast){ 
    $('<li><a href="#" class="first_link">&lt;</a></li>').appendTo(pager); 
}  
if (settings.showPrevNext){ 
    $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager); 
} 

var curr = 0; 
while(numPages > curr && (settings.hidePageNumbers==false)){ 
    $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager); 
    curr++; 
} 

if (settings.numbersPerPage>1) { 
    $('.page_link').hide(); 
    $('.page_link').slice(pager.data("curr"), settings.numbersPerPage).show(); 
} 

if (settings.showPrevNext){ 
    $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager); 
} 
if (settings.showFirstLast){ 
    $('<li><a href="#" class="last_link">&gt;</a></li>').appendTo(pager); 
} 

pager.find('.page_link:first').addClass('active'); 
pager.find('.prev_link').hide(); 
if (numPages<=1) { 
    pager.find('.next_link').hide(); 
} 
pager.children().eq(2).addClass("active"); 

children.hide(); 
children.slice(0, perPage).show(); 

pager.find('li .page_link').click(function(){ 
    var clickedPage = $(this).html().valueOf()-1; 
    goTo(clickedPage,perPage); 
    return false; 
}); 
pager.find('li .first_link').click(function(){ 
    first(); 
    return false; 
}); 

pager.find('li .prev_link').click(function(){ 
    previous(); 
    return false; 
}); 
pager.find('li .next_link').click(function(){ 
    next(); 
    return false; 
}); 
pager.find('li .last_link').click(function(){ 
    last(); 
    return false; 
});  
function previous(){ 
    var goToPage = parseInt(pager.data("curr")) - 1; 
    goTo(goToPage); 
} 

function next(){ 
    goToPage = parseInt(pager.data("curr")) + 1; 
    goTo(goToPage); 
} 

function first(){ 
    var goToPage = 0; 
    goTo(goToPage); 
} 

function last(){ 
    var goToPage = numPages-1; 
    goTo(goToPage); 
} 

function goTo(page){ 
    var startAt = page * perPage, 
     endOn = startAt + perPage; 

    children.css('display','none').slice(startAt, endOn).show(); 

    if (page>=1) { 
     pager.find('.prev_link').show(); 
    } 
    else { 
     pager.find('.prev_link').hide(); 
    } 

if (page < (numPages - settings.numbersPerPage)) { 
     pager.find('.next_link').show(); 
    } 
    else { 
     pager.find('.next_link').hide(); 
    } 

    pager.data("curr",page); 

if (settings.numbersPerPage > 1) { 
    $('.page_link').hide(); 

    if (page < (numPages - settings.numbersPerPage)) { 
     $('.page_link').slice(page, settings.numbersPerPage + page).show(); 
    } 
    else { 
     $('.page_link').slice(numPages-settings.numbersPerPage).show(); 
    } 
} 

    pager.children().removeClass("active"); 
    pager.children().eq(page+2).addClass("active"); 

} 
}; 

$(document).ready(function(){ 

    $('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4}); 

}); 

Answer 2

Я разрешил последнюю часть, когда вы переходите на последние страницы, теперь вы можете увидеть все 5 страниц или столько, сколько указано в настройках. Вот как:

В функции GOTO:

В основном мы просто проверить, что номер текущей страницы и если это число меньше общее количество страниц - сколько страниц, чтобы показать сразу отобразится следующие пять от текущей страницы в противном случае мы находимся на общих страницах - страницах, чтобы показать их сразу и показать их

if (settings.numbersPerPage > 1) { 
     $('.page_link').hide(); 

     if (page < (numPages - settings.numbersPerPage)) { 
      $('.page_link').slice(page, settings.numbersPerPage + page).show(); 
     } 
     else { 
      $('.page_link').slice(numPages-settings.numbersPerPage).show(); 
     } 
    }