Bootstrap与KnockoutJs相结合实现分页效果实例详解

KnockoutJS是一个JavaScript实现的MVVM框架。非常棒。比如列表数据项增减后，不需要重新刷新整个控件片段或自己写JS增删节点，只要预先定义模板和符合其语法定义的属性即可。简单的说，我们只需要关注数据的存取。

一、引言

　　由于最近公司的系统需要改版，改版的新系统我打算使用KnockoutJs来制作Web前端。在做的过程中，遇到一个问题——如何使用KnockoutJs来完成分页的功能。在前一篇文章中并没有介绍使用KnockoutJs来实现分页，所以在这篇文章中，将补充用KnockoutJs+Bootstrap来实现数据的分页显示。

二、使用KnockoutJs实现分页

　　这里采用了两种方式来实现分页，第一种是将所有数据加载出来，然后再将所有数据分页显示；第二种是每次都只加载部分数据，每次请求都重新加载后面的数据。

　　对于这两种方式，使用Razor方式实现的分页一般都会采用第二种方式来实现分页，但是对于单页面程序来说，第一种实现方式也有其好处，对于不是非常大量的数据完全可以采用第一种实现方式，因为这样的话，后面的数据的加载，用户体验非常的流畅。所以这里将分别介绍这两种实现方式。

2.1 每次加载部分数据的实现

　 　这里的后端代码采用的是前一篇文章的代码，只是多加了一些示例数据而已。具体的后端实现代码为：

rush:js;"> ///

/// Web API 服务，为Web前端提供数据服务 ///

public class TaskController : ApiController { private readonly TaskRepository _taskRepository = TaskRepository.Current; public IEnumerable GetAll() { return _taskRepository.GetAll().OrderBy(a => a.Id); } [Route("api/task/GetByPaged")] public PagedModel GetAll([FromUri]int pageIndex) { const int pageSize = 3; int totalCount; var tasks = _taskRepository.GetAll(pageIndex,pageSize,out totalCount).OrderBy(a => a.Id); var pageData = new PagedModel() { PageIndex = pageIndex,PagedData = tasks.ToList(),TotalCount = totalCount,PageCount = (totalCount+ pageSize -1) / pageSize }; //返回数据 return pageData; } } ///

/// 任务仓储，封装了所有关于数据库的操作 ///

public class TaskRepository { #region Static Filed private static Lazy _taskRepository = new Lazy(() => new TaskRepository()); public static TaskRepository Current { get { return _taskRepository.Value; } } #endregion #region Fields private readonly List _tasks = new List() { new Task { Id =1,Name = "创建一个SPA程序",Description = "SPA(single page web application),SPA的优势就是少量带宽，平滑体验",Owner = "Learning hard",FinishTime = DateTime.Parse(DateTime.Now.AddDays(1).ToString(CultureInfo.InvariantCulture)) },new Task { Id =2,Name = "学习KnockoutJs",Description = "KnockoutJs是一个MVVM类库,支持双向绑定",Owner = "Tommy Li",FinishTime = DateTime.Parse(DateTime.Now.AddDays(2).ToString(CultureInfo.InvariantCulture)) },new Task { Id =3,Name = "学习AngularJS",Description = "AngularJs是MVVM框架，集MVVM和MVC与一体。",Owner = "李志",FinishTime = DateTime.Parse(DateTime.Now.AddDays(3).ToString(CultureInfo.InvariantCulture)) },new Task { Id =4,Name = "学习ASP.NET MVC网站",Description = "Glimpse是一款.NET下的性能测试工具，支持asp.net 、asp.net mvc,EF等等，优势在于，不需要修改原项目任何代码，且能输出代码执行各个环节的执行时间",Owner = "Tonny Li",FinishTime = DateTime.Parse(DateTime.Now.AddDays(4).ToString(CultureInfo.InvariantCulture)) },new Task { Id =5,Name = "测试任务1",Description = "测试任务1",FinishTime = DateTime.Parse(DateTime.Now.AddDays(5).ToString(CultureInfo.InvariantCulture)) },new Task { Id =6,Name = "测试任务2",Description = "测试任务2",FinishTime = DateTime.Parse(DateTime.Now.AddDays(6).ToString(CultureInfo.InvariantCulture)) },new Task { Id =7,Name = "测试任务3",Description = "测试任务3",FinishTime = DateTime.Parse(DateTime.Now.AddDays(7).ToString(CultureInfo.InvariantCulture)) },}; #endregion #region Public Methods public IEnumerable GetAll() { return _tasks; } public IEnumerable GetAll(int pageNumber,int pageSize,out int totalCount) { var skip = (pageNumber - 1) * pageSize; var take = pageSize; totalCount = _tasks.Count; return _tasks.Skip(skip).Take(take); } public Task Get(int id) { return _tasks.Find(p => p.Id == id); } public Task Add(Task item) { if (item == null) { throw new ArgumentNullException("item"); } item.Id = _tasks.Count + 1; _tasks.Add(item); return item; } public void Remove(int id) { _tasks.RemoveAll(p => p.Id == id); } public bool Update(Task item) { if (item == null) { throw new ArgumentNullException("item"); } var taskItem = Get(item.Id); if (taskItem == null) { return false; } _tasks.Remove(taskItem); _tasks.Add(item); return true; } #endregion }

　　Web前端的实现代码：

rush:js;"> @{ ViewBag.Title = "Index2"; Layout = "~/Views/Shared/_Layout.cshtml"; }

分页第二种实现方式——任务列表

编号 名称 描述 负责人 创建时间 完成时间 状态 总共有条记录， 每页显示：条