Use jquery and QuickSearch, Tablesorter plug-ins to enhance interface interaction

We've seen the Jtempalte plug-in in a table showing client pagination with jquery and Jtemplates Plug-ins, which helps us make it easy to customize the JSON data collection through a custom template, and to implement pagination on the client side. jquery provides a lot of Plug-in,quick search that allows us to perform dynamic searches in the data source by attaching an HTML element to search as the data source; The sorter plugin allows us to sort the table support without too much code. Today we'll look at how to use the Quick Search and table sorter plug-ins to make our interface more interactive.

Quick Search

With Quick Search you can easily provide a dynamic query function on your page, although this query is just a data source for the data that is contained in an HTML based on the page, but that's enough to excite you, isn't it? It really doesn't need you to do too much work, just a few lines of JavaScript code.

First you need to get quicksearch.js, you can #download下载得到 from http://rikrikrik.com/jquery/quicksearch/. Then we'll build a page, review the last content, use jquery to invoke the method inside the page and display the data through the template. Very simply, we declare a page method to get the list of blogs for the Cnblogs homepage:

[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;
　　}