上一章主要是关于分页控件的原理，代码也没有重构。在这一章会附上小插件的下载链接，插件主要就是重构逻辑部分，具体可以下载源文件看下，源代码也有注释。为了测试这个插件是能用的，我弄了个简单的asp.net例子（vs 2010）。通过ajax根据每一页请求数据，数据是使用json格式进行传输，通过knockout.js绑定。在这里顺便推荐一下汤姆大叔的Knockout应用开发指南 ，是学习Knockout非常好的文章。
效果图：
主要思路是通过分页控件的callback方法把 当前页 和 每页显示数量 传给pageselectCallback方法，pageselectCallback请求后台的getModel方法获取当前页的数据，然后数据通过knockout提供的方法把数据绑定到Html控件上。
一、定义请求数据方法
[WebMethod]
public static string getModel(string index, string pagesize)
{
int pageIndex = Int32.Parse(index);
int pageSize = Int32.Parse(pagesize);
Models models = new Models();
IList<Model> allModels = models.getModels();//获取全部数据
if (pageIndex > )
{
pageIndex = pageIndex * pageSize;
}
if (pageSize > (allModels.Count - - pageIndex))
{
pageSize = allModels.Count - - pageIndex;
}
var pageSysmenus = allModels.Skip(pageIndex).Take(pageSize).ToList<Model>();//根据页数和每页显示数量获取数据
string thedata = JsonHelper.ObjDivertToJson(pageSysmenus);//把数据转成json格式 return thedata;
}
//获取总数
[WebMethod]
public static int getCounts()
{
Models models = new Models();
IList<Model> allModels = models.getModels();
int count = allModels.Count - ;
return count;
}
二、knockout 绑定数据
<table class="mytable" border="1" cellspacing="0">
<thead style="background-color: #0AA403">
<tr>
<th>
Id
</th>
<th>
Name
</th>
<th>
TrueName
</th>
<th>
Sex
</th>
<th>
</th>
</tr>
</thead>
<tbody id="tChangeClor" data-bind="foreach: models">
<tr>
<td>
<span data-bind="text: Id"></span>
</td>
<td>
<span data-bind="text: Name"></span>
</td>
<td>
<span data-bind="text: TrueName"></span>
</td>
<td>
<span data-bind="text: Sex"></span>
</td>
<td>
<span data-bind="text: Email"></span>
</td>
</tr>
</tbody>
</table>
<table>
<tr>
<td id="Pagination" class="pagination">
</td>
</tr>
</table>
data-bind绑定的字段要与后台model的字段一致，当然knockout不单只是这个功能，还有数据验证等功能，很好用的一个插件。
三、ajax 请求数据
//定义knockout的viewmodel
var viewModel = function () {
var self = this;
self.models = ko.observableArray();
}
var vm = new viewModel();
//分页控件的callback方法，通过当前页和显示页数请求数据
var pageselectCallback = function (page_index, pagesize) {
var mydata = "{'index':" + page_index + ",'pagesize':" + pagesize + "}";//post到getPage.aspx/getModel的参数
$.ajax({
type: "post",
url: "getPage.aspx/getModel",
data: mydata,
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
var datas = data.d;
mappingData(datas);
},
error: function (Request) {
alert(Request.responseText);
}
});
};
var mappingData = function (data) {
var mydata = ko.mapping.fromJSON(data);
vm.models = ko.mapping.fromJS(mydata, {}, vm.models);//把json格式转换成object格式，赋值给models
$('.mytable tbody tr:even').addClass('odd');
};
$(function () {
var getCounts;
$.ajax({
type: "post",
url: "getPage.aspx/getCounts",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
var datas = data.d;
getCounts = Math.ceil(datas / 2);//总页数，向上取整
//调用分页控件插件
$("#Pagination").pagination({
pageSize: 2,
current_page: 1,
display_num: 10,
edge_num: 3,
counts_num:getCounts,
callback: pageselectCallback
});
},
error: function (Request) {
alert(Request.responseText);
}
});
ko.applyBindings(vm, document.getElementById('tChangeClor'));
});
关于ko.mapping.fromJSON(data)还是ko.mapping.fromJS(data)的判断，如果data是string类型（ data ='{"Id":1,"Name":"WinKi"}' )就用fromJSON，如果data是object类型（ data = {Id:1,Name:"WinKi"} ) 就用fromJS。如果使用$.getJSON()获取数据可以把JSON格式转换成object格式。
这个只是测试例子，实际项目中获取数据部分可以根据存储过程来获取数据，或者把全部的数据先存到缓存中。这样就不会像我例子那样每次都要先查找所有的数据。
如果您觉得还不错，点个推荐吧。
转载请注明出处！谢谢！