[后端人员耍前端系列]KnockoutJs篇：使用KnockoutJs+Bootstrap实现分页

一、引言

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

二、使用KnockoutJs实现分页

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

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

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

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

/// <summary>
    /// Web API 服务，为Web前端提供数据服务
    /// </summary>
    public class TaskController : ApiController
    {
        private readonly TaskRepository _taskRepository = TaskRepository.Current;

        public IEnumerable<Task> 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;
        }
    }


/// <summary>
    /// 任务仓储，封装了所有关于数据库的操作
    /// </summary>
    public class TaskRepository
    {
        #region Static Filed
        private static Lazy<TaskRepository> _taskRepository = new Lazy<TaskRepository>(() => new TaskRepository());

        public static TaskRepository Current
        {
            get { return _taskRepository.Value; }
        }

        #endregion

        #region Fields
        private readonly List<Task> _tasks = new List<Task>()
        {
            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",
                Owner = "李志",
                FinishTime = DateTime.Parse(DateTime.Now.AddDays(5).ToString(CultureInfo.InvariantCulture))
            },
           new Task
            {
                Id =6,
                Name = "测试任务2",
                Description = "测试任务2",
                Owner = "李志",
                FinishTime = DateTime.Parse(DateTime.Now.AddDays(6).ToString(CultureInfo.InvariantCulture))
            },
           new Task
            {
                Id =7,
                Name = "测试任务3",
                Description = "测试任务3",
                Owner = "李志",
                FinishTime = DateTime.Parse(DateTime.Now.AddDays(7).ToString(CultureInfo.InvariantCulture))
            },
        };

        #endregion

        #region Public Methods
        public IEnumerable<Task> GetAll()
        {
            return _tasks;
        }

        public IEnumerable<Task> 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
    }

View Code