Я реализовал функцию разбиения на страницы, используя bootstrap карты.
Мои нумерованные страницы имеют следующие значения:
@for (int i = 1; i <= Model.PageCount(); i++) {
<a href="#" class="page-link-item btn btn-dark" data-page="@i">@i</a>
}
Сначала каждая ссылка имеет класс btn btn-dark
. Но я хочу, чтобы на первой странице был класс btn btn-success active
. Я пробовал следующее, но каждый раз, когда я нажимаю на последующие страницы, предыдущие остаются зелеными, то есть btn btn-sucess active
. Пожалуйста, помогите мне исправить это.
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.0/mustache.min.js"></script>
<script>
var pagination = {
employees: [],
init: function (employees) {
this.employees = employees;
this.cacheDom();
this.bindEvents();
this.render();
},
cacheDom: function () {
this.$pageLinks = $(".page-link-item");
this.$gridContainter = $("#grid-container");
this.template = $("#employee-template").html();
},
bindEvents: function () {
this.$pageLinks.on('click', this.handlePageLinkClick.bind(this))
},
render: function () {
var data = {
employees: this.employees
};
console.log(data);
console.log(this.$gridContainter);
this.$gridContainter.html(Mustache.render(this.template, data));
},
handlePageLinkClick: function (evt) {
var page = $(evt.target).data("page"); //btn btn-dark
if (page == page) {
$(evt.currentTarget).removeClass('btn btn-dark')
evt.currentTarget.className += " btn btn-success active";
} else {
$(evt.currentTarget).removeClass('btn btn-success active')
evt.currentTarget.className += " btn btn-dark";
}
console.log(page);
$.get('/employee/GetEmployees', { page: page }, function (data) {
this.employees = data;
this.render();
}.bind(this));
}
}
var employees = JSON.parse('@Html.Raw(Json.Serialize(Model.Employees))');
pagination.init(employees);
</script>