如何让特定页面默认处于选中状态

Question

我有一个分页，如图所示 https://jsfiddle.net/solodev/yw7y4wez/

我想默认选择或突出显示某个页面(假设第 8 页(

我尝试遵循代码，但它不起作用

page = '@Model.CurrentPageIndex';
$('.page-active').removeClass('page-active');
$('#page' + page).addClass('page-active');

其中"@Model.当前页面索引"包含页码。(例如 8(

Answer 1

分

页允许您设置起始页。你在jsfiddle示例中有它。

$('#pagination-demo').twbsPagination({
totalPages: 5,
// the current page that show on start
startPage: 2, //THIS IS THE LINE THAT CHANGES START PAGE
// maximum visible pages
visiblePages: 5,
initiateStartPageClick: true,
// template for pagination links
href: false,
// variable name in href template for page number
hrefVariable: '{{number}}',
// Text labels
first: 'First',
prev: 'Previous',
next: 'Next',
last: 'Last',
// carousel-style pagination
loop: false,
// callback function
onPageClick: function (event, page) {
    $('.page-active').removeClass('page-active');
  $('#page'+page).addClass('page-active');
},
// pagination Classes
paginationClass: 'pagination',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first',
pageClass: 'page',
activeClass: 'active',
disabledClass: 'disabled',
});

当您使用此插件时，最好使用其功能，而不是在顶部添加自己的功能。这样，它可以确保其他功能(如"上一个"和"最后一个"(仍然有效。

Answer 2

试试下面：

var page = '@Model.CurrentPageIndex';
$('.page-active').removeClass('page-active');
$('ul.pagination li a.page-link').each(function(index) {
    if (Number($(this).html()) === Number(page)) {
     $(this).closest('li').addClass('page-active');
    }
});

Answer 3

尝试关注，

page = '@Model.CurrentPageIndex';
$('#pagination-demo').twbsPagination('show', page);