分页的第二种方式
var List
viewmodel2 = function() {
//
viewmodel本身。用来防止直接使用this的时候作用域混乱
var self = this;
self.loadingState = ko.observable(true);
self.pageSize = ko.observable(3);
//数据
this.pagedList = ko.observableArray();
//要访问的
页码
this.pageIndex = ko.observable(1);
//总页数
this.pageCount = ko.observable(1);
//
页码数
this.allPages = ko.observableArray();
//当前页
this.currengePage = ko.observable(1);
self.totalCount = ko.observable(1);
this.refresh = function() {
//限制请求
页码在该数据
页码范围内
if (self.pageIndex() < 1)
self.pageIndex(1);
if (self.pageIndex() > 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.prev
IoUs = 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 List
viewmodel2();
viewmodel.refresh();
if ($('#list2').length)
ko.applyBindings(
viewmodel,$('#list2').get(0));
});
@H_
301_34@
这里介绍了下使用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 list
viewmodel = new List
viewmodel();
function bind
viewmodel() {
sendAjaxRequest("GET",function (data) {
list
viewmodel.loadingState(false);
list
viewmodel.list(data);
list
viewmodel.totalCount(data.length);
if ($('#list').length)
ko.applyBindings(list
viewmodel,$('#list').get(0));
},null,null);
}
$(document).ready(function () {
bind
viewmodel();
});
@H_
301_34@
其前端页面的实现与前面的实现类似。具体页面代码如下:
任务列表
编号
名称 |
描述 |
负责人 |
创建时间 |
完成时间 |
状态 |
总共有条记录, 每页显示:条
@H_
301_34@
@H_
301_34@
301_34@
@H_
301_34@
@H_
301_34@
三、运行效果
接下来,让我们看看,使用KnockoutJs实现的分页效果:
四、总结
到这里,本文要介绍的内容就结束,尽管本文实现的内容相对比较简单,但是对于一些刚接触KnockoutJs的朋友来说,相信本文的实现会是一个很多的指导。接下来,我将会为大家分享下AngularJs的相关内容。
以上所述是小编给大家介绍的Bootstrap与KnockoutJs相结合实现分页效果实例详解,希望对大家有所帮助!