用jQuery和jTemplates插件实现客户端分页的表格展现

核心提示： var currentPage = 1;var lastPage = 1;var pageSize = 5;function GetRSSItemCount() {$.ajax({type: "POST",url: "Default.aspx/GetFeeds

var currentPage = 1;
var lastPage = 1;
var pageSize = 5;
　　
function GetRSSItemCount() {
$.ajax({
　　type: "POST",
　　url: "Default.aspx/GetFeedsCount",
　　data: "{}",
　　contentType: "application/json; charset=utf-8",
　　dataType: "json",
　　success: function(msg) {
　　　// msg.d will contain the total number of items, as
　　　// an integer. Divide to find total number of pages.
　　　lastPage = Math.ceil(msg.d / pageSize);
　　　// TODO: Update navigation status
　　}
});
}

接下来就是实现// TODO: Update navigation status标记的内容了：更新导航栏的状态及其动作。当前页的值存储在currentPage变量中，lastPage告诉我们哪一页是最后页，通过这两个参数可以很容易的控制导航状态。而因为他们是全局变量，所以执行导航时只需要通过简单的++/--操作，最终请求GetFeeds方法时会取得相应页的数据。

function UpdatePaging() {
// If we're not on the first page, enable the "Previous" link.
if (currentPage != 1) {
　　$('#PrevPage').attr('href', '#');
　　$('#PrevPage').click(PrevPage);
}
　　
// If we're not on the last page, enable the "Next" link.
if (currentPage != lastPage) {
　　$('#NextPage').attr('href', '#');
　　$('#NextPage').click(NextPage);
}
}
　　
function NextPage(evt) {
// Prevent the browser from navigating needlessly to #.
evt.preventDefault();
　　
// Entertain the user while the previous page is loaded.
DisplayProgressIndication();
　　
// Load and render the next page of results, and
// increment the current page number.
DisplayRSS(++currentPage);
}
　　
function PrevPage(evt) {
// Prevent the browser from navigating needlessly to #.
evt.preventDefault();
　　
// Entertain the user while the previous page is loaded.
DisplayProgressIndication();
　　
// Load and render the previous page of results, and
// decrement the current page number.
DisplayRSS(--currentPage);
}

用UpdatePaging函数替换上边标注的TODO部分，完整的分页功能即可实现。当然，这里的分页显得很粗糙，但你可以通过扩展其样式来做出更丰富的导航栏。另外示例中也提供了loading时提示用户，这里不尽具表。一个很好的启示是方便的展现LIST并提供简单的客户端分页。