teng2015 / knockout-pagination

Knockout.js分页插件

knockout-page

Knockout.js分页插件

在线示例（Online demo）

• http://satrong.github.io/knockout-pagination/demo/index.html
• http://satrong.github.io/knockout-pagination/demo/ajax.html

示例(Example)

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();

使用方法(Usage)

• ko.koPage.init(self, callback, config): 初始化分页方法，参数(Arguments)介绍如下
  • self: Viewmodel；
  • callback: 处理数据，传入的参数为当前的页码(currentPage)；
  • config: 自定义配置
    • next: {String} 默认值：下一页
    • prev: {String} 默认值：上一页
    • first: {String} 默认值：首页
    • last: {String} 默认值：末页
    • className: {String} 给分页添加的样式， 默认值：pagination
    • linksCount: {Number} 显示的页面按钮数据，若值为偶数则会自动加1，默认值：5
    • pagesize: {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替代

依赖(Dependencies)

• Knockout