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

 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 = 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: 5
58          },
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="<" 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==$parent.pageIndex() -->
45         <button class="btn btn-success" type="button" data-bind="text:$data,click:$parent.btnClick"></button>
46         <!-- /ko -->
47         <!-- ko ifnot: $data==$parent.pageIndex() -->
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=">" data-bind="click:nextPageClick" />
57     </div>
58     <div class="btn-group">
59         <span  data-bind="text:TotalCount()+‘条数据‘" />
60     </div>
61 </div>
62 <script src="/Scripts/jquery-2.1.1.min.js"></script>
63 <script src="/Scripts/knockout-3.2.0.js"></script>
64 <script src="/Scripts/knockout.mapping.js"></script>
65 <script src="/Content/Plus/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
66 <link href="/Content/Plus/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" />
67 <script src="/Scripts/BaseInfor/List.js"></script>