/// <reference path="../knockout-3.2.0.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));});});

<table class="table table - striped"><thead><tr><th>姓名</th><th>性別</th><th>出生年月</th><th>年齡</th><th>民族</th><th>身份證號(hào)</th><th>入黨時(shí)間</th><th>工作時(shí)間</th><th>籍貫</th><th>出生地</th><th>證件照</th></tr></thead><tbody><!-- ko foreach: ObjectList --><tr><td data-bind="text:Name"></td><td data-bind="text:Gender"></td><td data-bind="text:BirthDate"></td><td data-bind="text:Age"></td><td data-bind="text:Nation"></td><td data-bind="text:IDNumber"></td><td data-bind="text:PartyTime"></td><td data-bind="text:WorkTime"></td><td data-bind="text:hail"></td><td data-bind="text:BirthAddress"></td><td data-bind="text:Photo"></td></tr><!-- /ko --></tbody></table><div class="btn-toolbar" role="toolbar"><div class="btn-group"><input class="btn btn-success" type="button" value="<" data-bind="click:perPageClick" /></div><div class="btn-group"><input class="btn btn-success" type="button" data-bind="value:'1',click:firstPageClick" /></div><div class="btn-group"><!-- ko foreach: btns --><!-- ko if: $data==$parent.pageIndex() --><button class="btn btn-success" type="button" data-bind="text:$data,click:$parent.btnClick"></button><!-- /ko --><!-- ko ifnot: $data==$parent.pageIndex() --><button class="btn btn-default" type="button" data-bind="text:$data,click:$parent.btnClick"></button><!-- /ko --><!-- /ko --></div><div class="btn-group"><input class="btn btn-success" type="button" data-bind="value:pageTotal,click:lastPageClick" /></div><div class="btn-group"><input class="btn btn-success" type="button" value=">" data-bind="click:nextPageClick" /></div><div class="btn-group"><span data-bind="text:TotalCount()+'條數(shù)據(jù)'" /></div></div><script src="/Scripts/jquery-2.1.1.min.js"></script><script src="/Scripts/knockout-3.2.0.js"></script><script src="/Scripts/knockout.mapping.js"></script><script src="/Content/Plus/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script><link href="/Content/Plus/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" /><script src="/Scripts/BaseInfor/List.js"></script>