Knockout.js分页插件
- http:https://satrong.github.io/knockout-pagination/demo/index.html
- http:https://satrong.github.io/knockout-pagination/demo/ajax.html
html代码:
<ul data-bind="foreach:list">
<li><span data-bind="text:id"></span>:<span data-bind="text:name"></span></li>
</ul>
<div data-bind="page:currentPage"></div>
js代码:
var data = [
{id:"1",name:"a"},
{id:"2",name:"b"},
{id:"3",name:"c"},
{id:"4",name:"d"},
...
];
var Viewmodel = function(){
this.list = ko.observableArray();
ko.koPage.init(this,this.GetData,{
pagesize:5
});
}
Viewmodel.prototype.GetData = function(pageindex){
ko.koPage.count(data.length);
this.list(data.slice((pageindex-1)*5,pageindex*5));
}
var vm = new Viewmodel;
ko.applyBindings(vm);
/// 当新增数据时 重置分页
data.unshift({id:"0",name:"new"});
vm.pageReset();
ko.koPage.init(self, callback, config)
: 初始化分页方法,参数(Arguments)介绍如下self
: Viewmodel;callback
: 处理数据,传入的参数为当前的页码(currentPage
);config
: 自定义配置next
: {String
} 默认值:下一页prev
: {String
} 默认值:上一页first
: {String
} 默认值:首页last
: {String
} 默认值:末页className
: {String
} 给分页添加的样式, 默认值:paginationlinksCount
: {Number
} 显示的页面按钮数据,若值为偶数则会自动加1,默认值:5pagesize
: {Number
} 每页显示的条数,必须根据实际情况设定,必须手动设置showLinks
: {Boolen
} 是否显示页码按钮,默认值:true
ko.koPage.count(total)
:total
为Number类型,设置总条数的快捷方法,在callback
中用到,也可以直接使用this.countItems(total)
page
: 自定义绑定方法,在视图中直接使用data-bind="page:currentPage"
即可this.pageReset(pageindex)
: {Number} 重置分页,默认值为this.currentPage()
。当分页数据发生变化(新增或删除条数时)调用此方法可重置分页数据。
- 一个ViewModel中只能使用一个分页
- 在一个页面中有多个分页(多个ViewModel)时不能使用
ko.koPage.count
方法,需要使用this.countItems
替代
- Knockout