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

本段js和html两段代码实现分页控件效果，下面通过本文给大家详细介绍下基于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  (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)  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)); }); });

HTML：

 
 
 
 
姓名
性别
出生年月
年龄
民族
身份证号
入党时间
工作时间
籍贯
出生地
证件照
 
 
  <input class="btn btn-success" type="button" value="    " data-bind="click:nextPageClick"/> 

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

以上就是基于KO+BootStrap+MVC实现的分页控件代码分享的详细内容，更多请关注本站其它相关文章！