这里有新鲜出炉的 Bootstrap 入门,程序狗速度看过来!
Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/html 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范,它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎,一直是 GitHub 上的热门开源项目,包括 NASA 的 MSNBC(微软全国广播公司)的 Breaking News 都使用了该项目。
本段 js 和 html 两段代码实现分页控件效果,下面通过本文给大家详细介绍下基于 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 () {
- 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));
- });
- });
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>
以上所述是小编给大家介绍的基于 KO+BootStrap+MVC 实现的分页控件代码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0513/330602.html