Bootstrap与KnockoutJs相结合实现分页效果实例详解
发布时间：2020-12-18 00:56:12 所属栏目：安全 来源：网络整理
导读：KnockoutJS是一个JavaScript实现的MVVM框架。非常棒。比如列表数据项增减后，不需要重新刷新整个控件片段或自己写JS增删节点，只要预先定义模板和符合其语法定义的属性即可。简单的说，我们只需要关注数据的存
|
KnockoutJS是一个JavaScript实现的MVVM框架。非常棒。比如列表数据项增减后，不需要重新刷新整个控件片段或自己写JS增删节点，只要预先定义模板和符合其语法定义的属性即可。简单的说，我们只需要关注数据的存取。 一、引言 由于最近公司的系统需要改版，改版的新系统我打算使用KnockoutJs来制作Web前端。在做的过程中，遇到一个问题——如何使用KnockoutJs来完成分页的功能。在前一篇文章中并没有介绍使用KnockoutJs来实现分页，所以在这篇文章中，将补充用KnockoutJs+Bootstrap来实现数据的分页显示。 二、使用KnockoutJs实现分页 这里采用了两种方式来实现分页，第一种是将所有数据加载出来，然后再将所有数据分页显示；第二种是每次都只加载部分数据，每次请求都重新加载后面的数据。 对于这两种方式，使用Razor方式实现的分页一般都会采用第二种方式来实现分页，但是对于单页面程序来说，第一种实现方式也有其好处，对于不是非常大量的数据完全可以采用第一种实现方式，因为这样的话，后面的数据的加载，用户体验非常的流畅。所以这里将分别介绍这两种实现方式。 2.1 每次加载部分数据的实现这里的后端代码采用的是前一篇文章的代码，只是多加了一些示例数据而已。具体的后端实现代码为：
/// Web API 服务，为Web前端提供数据服务
///
public class TaskController : ApiController
{
private readonly TaskRepository _taskRepository = TaskRepository.Current;
public IEnumerable
Web前端的实现代码： 分页第二种实现方式——任务列表
名称 |
描述 |
负责人 |
创建时间 |
完成时间 |
状态 |
对应的Js实现为： self.pageCount()) {
self.pageIndex(self.pageCount());
}
//post异步加载数据
sendAjaxRequest("GET",function (data) {
// 加载新的数据前，先移除原先的数据
self.pagedList.removeAll();
self.allPages.removeAll();
self.totalCount(data.totalCount);
self.pageCount(data.pageCount);
self.loadingState(false);
for (var i = 1; i <= data.pageCount; i++) {
//装填页码
self.allPages.push({ pageNumber: i });
}
//for...in 语句用于对数组或者对象的属性进行循环操作。
//for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。
for (var i in data.pagedData) {
//装填数据
self.pagedList.push(data.pagedData[i]);
}
},'GetByPaged',{ 'pageIndex': self.pageIndex() });
};
//请求第一页数据
this.first = function() {
self.pageIndex(1);
self.refresh();
};
//请求下一页数据
this.next = function() {
self.pageIndex(this.pageIndex() + 1);
self.refresh();
};
//请求先前一页数据
this.previous = function() {
self.pageIndex(this.pageIndex() - 1);
self.refresh();
};
//请求最后一页数据
this.last = function() {
self.pageIndex(this.pageCount() - 1);
self.refresh();
};
//跳转到某页
this.gotoPage = function (data,event) {
self.pageIndex(data);
self.refresh();
};
};
function sendAjaxRequest(httpMethod,callback,url,reqData) {
$.ajax("/api/task" + (url ? "/" + url : ""),{
type: httpMethod,success: callback,data: reqData
});
}
$(document).ready(function () {
var viewModel = new ListViewModel2();
viewModel.refresh();
if ($('#list2').length)
ko.applyBindings(viewModel,$('#list2').get(0));
});
这里介绍了下使用KnockoutJs实现分页功能的实现思路： 1.页面加载完成之后，发起Ajax请求去异步调用REST 服务来请求部分数据。 2.然后将请求的数据通过KnockoutJs绑定显示。 3.将对应的分页信息绑定到Bootstrap分页中 4.当用户点击翻页时，再发起一个Ajax请求去异步调用Rest服务请求数据，再将请求的数据显示出来。 这上面是描述的代码的调用逻辑关系，你可以参考对应的JS代码来理解上面的描述。到此我们第二种实现方式就实现完成了。 2.2 第一次加载所有数据，然后将所有数据分页显示接下来就介绍了第一种实现方式，这样的实现方式，用户只会在第一次的时候才会感觉到数据加载中，翻页过程中感觉不到页面的加载，这样对于一些本身数据了不是太多的情况下，对于用户的感觉也是更加流畅的。 其具体的实现思路，也就是将请求的数据不要全部显示在页面上，因为数据太多，一下子显示到页面中，用户可能会眼花缭乱。将数据分页显示将使得用户查看更加清晰。 具体的Web前端Js的实现代码为： 0) {
self.pageIndex(self.pageIndex() - 1);
}
};
self.nextPage = function () {
if (self.pageIndex() < self.maxPageIndex()) {
self.pageIndex(self.pageIndex() + 1);
}
};
self.allPages = ko.dependentObservable(function () {
var pages = [];
for (var i = 0; i <= self.maxPageIndex() ; i++) {
pages.push({ pageNumber: (i + 1) });
}
return pages;
});
self.moveToPage = function (index) {
self.pageIndex(index);
};
};
var listViewModel = new ListViewModel();
function bindViewModel() {
sendAjaxRequest("GET",function (data) {
listViewModel.loadingState(false);
listViewModel.list(data);
listViewModel.totalCount(data.length);
if ($('#list').length)
ko.applyBindings(listViewModel,$('#list').get(0));
},null,null);
}
$(document).ready(function () {
bindViewModel();
});
其前端页面的实现与前面的实现类似。具体页面代码如下： 任务列表
名称 |
描述 |
负责人 |
创建时间 |
完成时间 |
状态 |
三、运行效果 接下来，让我们看看，使用KnockoutJs实现的分页效果： 四、总结 到这里，本文要介绍的内容就结束，尽管本文实现的内容相对比较简单，但是对于一些刚接触KnockoutJs的朋友来说，相信本文的实现会是一个很多的指导。接下来，我将会为大家分享下AngularJs的相关内容。 以上所述是小编给大家介绍的Bootstrap与KnockoutJs相结合实现分页效果实例详解，希望对大家有所帮助！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |