基于KO+bootstrap+MVC的分页控件

JS：

 /// <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 () {
         ;
         ) return;
         getData(wantIndex);
     }
     self.nextPageClick = function () {
         ;
          > (self.TotalCount() / self.PerCount())) return;
         getData(wantIndex);
     }
     self.firstPageClick = function () {
         getData();
     }
     self.lastPageClick = function () {
         getData(self.pageTotal());
     }

     ko.computed(function () {
         self.pageTotal = ko.observable(Math.ceil((self.TotalCount() / self.PerCount())))
         var pageCount = self.pageTotal();
         ) >  ? self.pageIndex() -  : ;
         ) < pageCount ? start +  : pageCount;
         if (end == pageCount)
         { ) >  ? pageCount -  : ;; }
         self.btns.removeAll();
         for (var i = start; i < end; i++) {
             self.btns.push(ko.mapping.fromJS(i + ));
         }
     });
 }
 $(document).ready(function () {
     $.getJSON("/BaseInfor/GetList",
          {
              pageIndex: , pageSize:
          },
         function (data) {
             ko.applyBindings(new ViewModel(data));
         });
 });

HTML：

 <table class="table table - striped">
     <thead>
         <tr>
             <th>姓名</th>
             <th>性别</th>
             <th>出生年月</th>
             <th>年龄</th>
             <th>民族</th>
             <th>身份证号</th>
             <th>入党时间</th>
             <th>工作时间</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()+'条数据'" />
     </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>