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

用jQuery和jTemplates插件实现客户端分页的表格展现2011-04-15Allan.一直以来觉得用JSON和JavaScript在客户端绑定数据给一个表格或者Grid是件很麻烦的事情。Microsoft ASP.NET Ajax提供了类似Sys.Date.DataTable和Sys.Dat.DataView这样的类来帮助实现客户端绑定，也可以用for循环来动态构建表格，但这些都显得很麻烦而且很不灵活。jQuery的jTemplates插件实现了一种灵活的方式来控制显示，它允许我们定义好一个显示模板，jQuery在展现数据时根据选择的模板来动态生成。这就类似于ASP.NET中的 ItemTemplate，也和XSLT有些类似。通过这样的方式，你可以很容易的在客户端通过自定义模板以很灵活的方式展现列表数据。

jQuery官方网站给jTemplates的定义是：jTemplates is a template engine 100% in JavaScript.更多的信息可以参考 http://jtemplates.tpython.com/。接下来我们实现一个小例子来演示如何使用jTemplate 去构建一个RSS阅读器。

创建RSS阅读器

RSS源通常都位于另外的domain中，而在AJAX中浏览器通常禁止cross-domain的访问，在这里，为了避开这个问题我们可以在服务端去取得数据。通常我们可以将这些方法做成WebMethod方法放到WebServices中，但这里我们可以将这些方法放到页面的cs文件中。需要注意的是，这个方法必须被声明为Static方法，而且要以WebMethod标注。这样做的目的是，只有在标注为WebMethod，客户端才能正常访问这个方法。而Static标记标识了这个方法不与任何这个页面的实例相关，而是而这个页面本身相关，对于任何一个实例而言都是相同的。所以在你调用的时候，你不需要与任何页面类的实例相关。

[WebMethod]
public static IEnumerable GetFeeds （int PageSize,int PageNumber）
{
  string strFeedUrl = System.Configuration.ConfigurationManager.AppSettings["FeedUrl"];
  XDocument feedXML = XDocument.Load（strFeedUrl）;

  var feeds = from feed in feedXML.Descendants（"item"）
        select new
        {
          Date = DateTime.Parse （feed.Element（"pubDate"）.Value）.ToShortDateString（）,
           Title = feed.Element（"title"）.Value,
           Link = feed.Element（"link"）.Value,
          Description = feed.Element（"description"）.Value,
        };

  //paging... （LINQ）
  return feeds.Skip（（PageNumber - 1） * PageSize）.Take（PageSize）;
}

在上边的方法中设定了RSS的地址，并通过LINQ to XML来取得我们想要的属性。Skip和Take函数联合起来实现了一个分页的功能。

通过jQuery调用Page Method

jQuery.Ajax方法实现了用Ajax的方式来请求一个页面并设定回调函数来处理相应状态和结果。在我们的实例中，需要请求上边写的 PageMethod并处理返回结果。

function DisplayRSS（page） {
   $.ajax（{
    type: "POST",
    url: "Default.aspx/GetFeeds",
    data: " {"PageSize":"" + pageSize + "", "PageNumber":"" + page + ""}",
     contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function（msg） {
       //TODO:Show the result as a table.
      alert（msg）;
    } 
  }）;
}

在success的回调函数中我们什么也没有做，先来看看 result到底是个什么东西。在浏览器中设置允许调试脚本，定义一个函数供回调函数中调用，然后设定断点在新的函数中。

我们看到在服务端将数据以IEnumerable返回后实际上在result中包含的是一个JSON表示的数据集合。每个对象含有Date, Description, Link和 Title属性，这和前边用LINQ取XML字段时是相符的。因为你已经拥有了这个数据集合，接下来所要做的就是在客户端通过某种方式展现出来。你也许会想到用动态拼接Table的方式来做，但这并不灵活。jTemplates提供了更优雅的方式来实现。