前端之家收集整理的这篇文章主要介绍了
基于KO+BootStrap+MVC实现的分页控件代码分享,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
JS:
var
viewmodel = function (data) {
var self = this;
self.ObjectList = ko.observableArray(data.ObjectList)
self.TotalCount = ko.observable(data.TotalCount);
self.PerCount = ko.observable(data.PerCount);
self.pageIndex = ko.observable(data.Index);
self.btns = ko.observableArray();
var getData = function (wantIndex) {
$.getJSON("/BaseInfor/GetList",{
pageIndex: wantIndex,pageSize: self.PerCount()
},function (data) {
self.ObjectList(data.ObjectList);
self.TotalCount(data.TotalCount);
self.PerCount(data.PerCount);
self.pageIndex(data.Index);
});
}
self.btnClick = function (item) {
getData(item);
}
self.perPageClick = function () {
var wantIndex = self.pageIndex() - 1;
if (wantIndex <= 0) return;
getData(wantIndex);
}
self.nextPageClick = function () {
var wantIndex = self.pageIndex() + 1;
if (wantIndex - 1 > (self.TotalCount() / self.PerCount())) return;
getData(wantIndex);
}
self.firstPageClick = function () {
getData(1);
}
self.lastPageClick = function () {
getData(self.pageTotal());
}
ko.computed(function () {
self.pageTotal = ko.observable(Math.ceil((self.TotalCount() / self.PerCount())))
var pageCount = self.pageTotal();
var start = (self.pageIndex() - 5) > 0 ? self.pageIndex() - 5 : 0;
var end = (start + 9) < pageCount ? start + 9 : pageCount;
if (end == pageCount)
{ var start = (pageCount - 9) > 0 ? pageCount - 9 : 0;; }
self.btns.removeAll();
for (var i = start; i < end; i++) {
self.btns.push(ko.mapping.fromJS(i + 1));
}
});
}
$(document).ready(function () {
$.getJSON("/BaseInfor/GetList",{
pageIndex: 1,pageSize: 5
},function (data) {
ko.applyBindings(new
viewmodel(data));
});
});