[后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页
2016-05-03 09:41
851 查看
一、引言
由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端。在做的过程中,遇到一个问题——如何使用KnockoutJs来完成分页的功能。在前一篇文章中并没有介绍使用KnockoutJs来实现分页,所以在这篇文章中,将补充用KnockoutJs+Bootstrap来实现数据的分页显示。二、使用KnockoutJs实现分页
这里采用了两种方式来实现分页,第一种是将所有数据加载出来,然后再将所有数据分页显示;第二种是每次都只加载部分数据,每次请求都重新加载后面的数据。对于这两种方式,使用Razor方式实现的分页一般都会采用第二种方式来实现分页,但是对于单页面程序来说,第一种实现方式也有其好处,对于不是非常大量的数据完全可以采用第一种实现方式,因为这样的话,后面的数据的加载,用户体验非常的流畅。所以这里将分别介绍这两种实现方式。
2.1 每次加载部分数据的实现
这里的后端代码采用的是前一篇文章的代码,只是多加了一些示例数据而已。具体的后端实现代码为:
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <div id="list"> <h2>任务列表</h2> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th>编号</th> <th>名称</th> <th>描述</th> <th>负责人</th> <th>创建时间</th> <th>完成时间</th> <th>状态</th> </tr> </thead> <tbody data-bind="foreach:pagedList"> <tr> <td data-bind="text: id"></td> <td><a data-bind="text: name"></a></td> <td data-bind="text: description"></td> <td data-bind="text: owner"></td> <td data-bind="text: creationTime"></td> <td data-bind="text: finishTime"></td> <td data-bind="text: state"></td> </tr> </tbody> <tbody data-bind="if:loadingState"> <tr> <td colspan="8" class="text-center"> <img width="60" src="/images/loading.gif" /> </td> </tr> </tbody> <tfoot data-bind="ifnot:loadingState"> <tr> <td colspan="8"> <div class="pull-right"> <div>总共有<span data-bind="text: totalCount"></span>条记录, 每页显示:<span data-bind="text: pageSize"></span>条</div> <div> <ul class="pagination"> <li data-bind="css: { disabled: pageIndex() === 0 }"><a href="#" data-bind="click: previousPage">«</a></li> </ul> <ul data-bind="foreach: allPages" class="pagination"> <li data-bind="css: { active: $data.pageNumber === ($root.pageIndex() + 1) }"><a href="#" data-bind="text: $data.pageNumber, click: function() { $root.moveToPage($data.pageNumber-1); }"></a></li> </ul> <ul class="pagination"><li data-bind="css: { disabled: pageIndex() === maxPageIndex() }"><a href="#" data-bind="click: nextPage">»</a></li></ul> </div> </div> </td> </tr> </tfoot> </table> </div> </div>
View Code
三、运行效果
接下来,让我们看看,使用KnockoutJs实现的分页效果:四、总结
到这里,本文要介绍的内容就结束,尽管本文实现的内容相对比较简单,但是对于一些刚接触KnockoutJs的朋友来说,相信本文的实现会是一个很多的指导。接下来,我将会为大家分享下AngularJs的相关内容。本文所有源码实现:KnockoutJSPaged
相关文章推荐
- 深入浅析Bootstrap列表组组件
- Bootstrap与KnockoutJs相结合实现分页效果实例详解
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
- Simple Bootstrap Page
- Bootstrap模板代码+页面自适应页面的案例代码
- 简述Bootstrap栅格布局方式
- 基于bootstrap 模态框的警告框
- 用jQuery和bootstrap实现分页器
- Bootstrap入门二:响应式页面布局
- bootstrap3 兼容IE8浏览器!
- 沫沫金:BootStarp轮播组件(carousel)支持触屏【Hammer】
- Bootstrap入门一:Hello Bootstrap
- Bootstrap
- bootstrap3 兼容IE8浏览器!
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
- Bootstrap 实现输入框中的 x 按钮删除文本值
- bootstrap模态框瞬间消失解决
- 详解Bootstrap列表组组件
- Bootstrap媒体对象的实现
- Bootstrap进度条组件知识详解