用jquery和jtemplates插件实现客户端分页的表格展现

《用jquery和jtemplates插件实现客户端分页的表格展现》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、用jQuery和jTemplates插件实现客户端分页的表格展现         一直以来觉得用JSON和JavaScript在客户端绑定数据给一个表格或者Grid是件很麻烦的事情。MicrosoftASP.NETAjax提供了类似Sys.Date.DataTable和Sys.Dat.DataView这样的类来帮助实现客户端绑定，也可以用for循环来动态构建表格，但这些都显得很麻烦而且很不灵活。jQuery的jTemplates插件实现了一种灵活的方式来控制显示，它允许我们定义好一个显示模板，jQuery在展现数据时根据选择的模板来动

2、态生成。这就类似于ASP.NET中的ItemTemplate，也和XSLT有些类似。通过这样的方式，你可以很容易的在客户端通过自定义模板以很灵活的方式展现列表数据。 jQuery官方网站给jTemplates的定义是：jTemplatesisatemplateengine100%inJavaScript.更多的信息可以参考http://jtemplates.tpython.com/。 接下来我们实现一个小例子来演示如何使用jTemplate去构建一个RSS阅读器。 创建RSS阅读器       RSS源通常都位于另外的domain中，

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

4、与任何页面类的实例相关。[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.Descendan

5、ts("item")                select new               {                   Date= DateTime.Parse(feed.Element("pubDate").Value).ToShortDateString(),                   Title=feed.Element("title").Value,                   Link=feed.Element("link").Value,                   Desc

6、ription=feed.Element("description").Value,               };     //paging...(LINQ)    return feeds.Skip((PageNumber-1)*PageSize).Take(PageSize);} 在上边的方法中设定了RSS的地址，并通过LINQtoXML来取得我们想要的属性。Skip和Take函数联合起来实现了一个分页的功能。 通过jQuery调用PageMethod         jQuery.Ajax方法实现了用Ajax的方式来请求一个

7、页面并设定回调函数来处理相应状态和结果。在我们的实例中，需要请求上边写的PageMethod并处理返回结果。function DisplayRSS(page){   $.ajax({       type: "POST",       url: "Default.aspx/GetFeeds",       data: "{'PageSize':'" +pageSize+ "','PageNumber':'" +page+ "'}",       contentType: "application/json;charset=utf-8"

8、,       dataType: "json",       success: function(msg){            //TODO:Showtheresultasatable.