快捷搜索:

MVC的分页控件

作者: w88官方网站手机版  发布:2019-06-29

JS:

 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 });

HTML:

 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           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>

w88官方网站手机版, 


本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:MVC的分页控件

关键词: www.w88985.c