基于KO+BootStrap+MVC实现的分页控件代码分享

JS：

/// lt;reference path="../knockout-3.2.0.js" /gt;
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 lt;= 0) return;
getData(wantIndex);
}
self.nextPageClick = function () {
var wantIndex = self.pageIndex() + 1;
if (wantIndex - 1 gt; (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) gt; 0 #63; self.pageIndex() - 5 : 0;
var end = (start + 9) lt; pageCount #63; start + 9 : pageCount;
if (end == pageCount)
{ var start = (pageCount - 9) gt; 0 #63; pageCount - 9 : 0;; }
self.btns.removeAll();
for (var i = start; i lt; 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));
});
});

HTML：

lt;table class="table table - striped"gt;
lt;theadgt;
lt;trgt;
lt;thgt;姓名lt;/thgt;
lt;thgt;性别lt;/thgt;
lt;thgt;出生年月lt;/thgt;
lt;thgt;年龄lt;/thgt;
lt;thgt;民族lt;/thgt;
lt;thgt;身份证号lt;/thgt;
lt;thgt;入党时间lt;/thgt;
lt;thgt;工作时间lt;/thgt;
lt;thgt;籍贯lt;/thgt;
lt;thgt;出生地lt;/thgt;
lt;thgt;证件照lt;/thgt;
lt;/trgt;
lt;/theadgt;
lt;tbodygt;
lt;!-- ko foreach: ObjectList --gt;
lt;trgt;
lt;td data-bind="text:Name"gt;lt;/tdgt;
lt;td data-bind="text:Gender"gt;lt;/tdgt;
lt;td data-bind="text:BirthDate"gt;lt;/tdgt;
lt;td data-bind="text:Age"gt;lt;/tdgt;
lt;td data-bind="text:Nation"gt;lt;/tdgt;
lt;td data-bind="text:IDNumber"gt;lt;/tdgt;
lt;td data-bind="text:PartyTime"gt;lt;/tdgt;
lt;td data-bind="text:WorkTime"gt;lt;/tdgt;
lt;td data-bind="text:hail"gt;lt;/tdgt;
lt;td data-bind="text:BirthAddress"gt;lt;/tdgt;
lt;td data-bind="text:Photo"gt;lt;/tdgt;
lt;/trgt;
lt;!-- /ko --gt;
lt;/tbodygt;
lt;/tablegt;
lt;div class="btn-toolbar" role="toolbar"gt;
lt;div class="btn-group"gt;
lt;input class="btn btn-success" type="button" value="lt;" data-bind="click:perPageClick" /gt;
lt;/divgt;
lt;div class="btn-group"gt;
lt;input class="btn btn-success" type="button" data-bind="value:'1',click:firstPageClick" /gt;
lt;/divgt;
lt;div class="btn-group"gt;
lt;!-- ko foreach: btns --gt;
lt;!-- ko if: $data==$parent.pageIndex() --gt;
lt;button class="btn btn-success" type="button" data-bind="text:$data,click:$parent.btnClick"gt;lt;/buttongt;
lt;!-- /ko --gt;
lt;!-- ko ifnot: $data==$parent.pageIndex() --gt;
lt;button class="btn btn-default" type="button" data-bind="text:$data,click:$parent.btnClick"gt;lt;/buttongt;
lt;!-- /ko --gt;
lt;!-- /ko --gt;
lt;/divgt;
lt;div class="btn-group"gt;
lt;input class="btn btn-success" type="button" data-bind="value:pageTotal,click:lastPageClick" /gt;
lt;/divgt;
lt;div class="btn-group"gt;
lt;input class="btn btn-success" type="button" value="gt;" data-bind="click:nextPageClick" /gt;
lt;/divgt;
lt;div class="btn-group"gt;
lt;span data-bind="text:TotalCount()+'条数据'" /gt;
lt;/divgt;
lt;/divgt;
lt;script src="/Scripts/jquery-2.1.1.min.js"gt;lt;/scriptgt;
lt;script src="/Scripts/knockout-3.2.0.js"gt;lt;/scriptgt;
lt;script src="/Scripts/knockout.mapping.js"gt;lt;/scriptgt;
lt;script src="/Content/Plus/bootstrap-3.2.0-dist/js/bootstrap.min.js"gt;lt;/scriptgt;
lt;link href="/Content/Plus/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" /gt;
lt;script src="/Scripts/BaseInfor/List.js"gt;lt;/scriptgt;

以上所述是小编给大家介绍的基于KO+BootStrap+MVC实现的分页控件代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！