在用jQuery和jTemplates插件实现客户端分页的表格展现一文中我们了解过jTempalte插件,它帮助我 们可以很轻松的通过订制模板来展现JSON数据集合,并且可以在客户端实现分页。jQuery提供了大量的 Plug-in,Quick Search允许我们通过将某个HTML元素附加给Search作为数据源来在数据源中进行动态搜 索;而Table Sorter插件则允许我们不用太多的代码就可以实现对表格的排序支持。今天我们就来看看如 何使用Quick Search和Table Sorter插件来让我们的界面具有更好的交互性。
Quick Search
通过Quick Search你可以很容易的在你的页面中提供一个动态查询的功能,虽然 这个查询只是在基于页面的某个HTML所容纳的数据作为数据源的,但这已经足够让你激动,不是吗?它确 实不用你做太多的工作,仅仅是几行Javascript代码而已。
首先你需要得到QuickSearch.js,你 可以从http://rikrikrik.com/jquery/quicksearch/#download下载得到。然后我们就来构建一个页面吧 ,复习一下上次的内容,用jQuery来调用页面内的方法并通过模板来显示数据。很简单,我们声明一个页 面方法来获取cnBlogs首页的blog列表:
[WebMethod]
public static IEnumerable GetBlogList()
{
string strBlogUrl = "http://www.cnblogs.com/rss";
XDocument doc = XDocument.Load(strBlogUrl);
var items = from item in doc.Descendants("item")
select new
{
Title = item.Element("title").Value,
Link = item.Element("link").Value,
Author = item.Element("author").Value,
Published = System.DateTime.Parse(item.Element("pubDate").Value).ToShortDateString(),
Description = item.Element("description").Value
};
return items;
}