如何默认选择特定页面？

Question

I have a pagination as shown in here https://jsfiddle.net/solodev/yw7y4wez/

I want to get some page selected or highlighted by default (suppose page 8)

I tried following code but it doesn't work

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

where '@Model.CurrentPageIndex' contains page no. (eg 8)

Answer 1

Try below:

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 2

Try following,

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

Answer 3

Pagination allows you to set the startpage. You have it in your jsfiddle example.

$('#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',

});

When you are using this plugin, it is probably be best to use its functions rather than add your own functionality on top. This way, it ensures that other functions such as "previous", and "last" still works.