1 /// <reference path="../knockout-3.2.0.js" /> 2 var ViewModel = function (data) { 3     var self = this; 4     self.ObjectList = ko.observableArray(data.ObjectList) 5     self.TotalCount = ko.observable(data.TotalCount); 6     self.PerCount = ko.observable(data.PerCount); 7     self.pageIndex = ko.observable(data.Index); 8     self.btns = ko.observableArray(); 9     var getData =http://www.mamicode.com/ function (wantIndex) {10         $.getJSON("/BaseInfor/GetList",11            {12                pageIndex: wantIndex, pageSize: self.PerCount()13            },14       function (data) {15           self.ObjectList(data.ObjectList);16           self.TotalCount(data.TotalCount);17           self.PerCount(data.PerCount);18           self.pageIndex(data.Index);19       });20     }21     self.btnClick = function (item) {22         getData(item);23     }24     self.perPageClick = function () {25         var wantIndex = self.pageIndex() - 1;26         if (wantIndex <= 0) return;27         getData(wantIndex);28     }29     self.nextPageClick = function () {30         var wantIndex = self.pageIndex() + 1;31         if (wantIndex - 1 > (self.TotalCount() / self.PerCount())) return;32         getData(wantIndex);33     }34     self.firstPageClick = function () {35         getData(1);36     }37     self.lastPageClick = function () {38         getData(self.pageTotal());39     }40 41     ko.computed(function () {42         self.pageTotal = ko.observable(Math.ceil((self.TotalCount() / self.PerCount())))43         var pageCount = self.pageTotal();44         var start = (self.pageIndex() - 5) > 0 ? self.pageIndex() - 5 : 0;45         var end = (start + 9) < pageCount ? start + 9 : pageCount;46         if (end == pageCount)47         { var start = (pageCount - 9) > 0 ? pageCount - 9 : 0;; }48         self.btns.removeAll();49         for (var i = start; i < end; i++) {50             self.btns.push(ko.mapping.fromJS(i + 1));51         }52     });53 }54 $(document).ready(function () {55     $.getJSON("/BaseInfor/GetList",56          {57              pageIndex: 1, pageSize: 558          },59         function (data) {60             ko.applyBindings(new ViewModel(data));61         });62 });

 1 <table class="table table - striped"> 2     <thead> 3         <tr> 4             <th>姓名</th> 5             <th>性别</th> 6             <th>出生年月</th> 7             <th>年龄</th> 8             <th>民族</th> 9             <th>身份证号</th>10             <th>入党时间</th>11             <th>工作时间</th>12             <th>籍贯</th>13             <th>出生地</th>14             <th>证件照</th>15         </tr>16     </thead>17     <tbody>18         <!-- ko foreach: ObjectList -->19         <tr>20             <td data-bind="text:Name"></td>21             <td data-bind="text:Gender"></td>22             <td data-bind="text:BirthDate"></td>23             <td data-bind="text:Age"></td>24             <td data-bind="text:Nation"></td>25             <td data-bind="text:IDNumber"></td>26             <td data-bind="text:PartyTime"></td>27             <td data-bind="text:WorkTime"></td>28             <td data-bind="text:hail"></td>29             <td data-bind="text:BirthAddress"></td>30             <td data-bind="text:Photo"></td>31         </tr>32         <!-- /ko -->33     </tbody>34 </table>35 <div class="btn-toolbar" role="toolbar">36     <div class="btn-group">37         <input class="btn btn-success" type="button" value=http://www.mamicode.com/"<" data-bind="click:perPageClick" />38     </div>39     <div class="btn-group">40        <input class="btn btn-success" type="button" data-bind="value:‘1‘,click:firstPageClick" />41     </div>42     <div class="btn-group">43         <!-- ko foreach: btns -->44         <!-- ko if: $data=http://www.mamicode.com/=$parent.pageIndex() -->"color: #008080;">45         <button class="btn btn-success" type="button" data-bind="text:$data,click:$parent.btnClick"></button>46         <!-- /ko -->47         <!-- ko ifnot: $data=http://www.mamicode.com/=$parent.pageIndex() -->"color: #008080;">48         <button class="btn btn-default" type="button" data-bind="text:$data,click:$parent.btnClick"></button>49         <!-- /ko -->50         <!-- /ko -->51     </div>52     <div class="btn-group">53         <input class="btn btn-success" type="button" data-bind="value:pageTotal,click:lastPageClick" />54     </div>55     <div class="btn-group">56         <input class="btn btn-success" type="button" value=http://www.mamicode.com/">" data-bind="click:nextPageClick" />57     </div>58     <div class="btn-group">59         <span  data-bind="text:TotalCount()+‘条数据‘" />60     </div>61 </div>62 <script src=http://www.mamicode.com/"/Scripts/jquery-2.1.1.min.js"></script>63 <script src=http://www.mamicode.com/"/Scripts/knockout-3.2.0.js"></script>64 <script src=http://www.mamicode.com/"/Scripts/knockout.mapping.js"></script>65 <script src=http://www.mamicode.com/"/Content/Plus/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>66 <link href=http://www.mamicode.com/"/Content/Plus/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" />67 <script src=http://www.mamicode.com/"/Scripts/BaseInfor/List.js"></script>