在用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; } |
在页面加载完成时我们通过jQuery请求得到blog列表信息并通过应用模板来展现:
$(document).ready(function() { $("#content").html("<img src='ajax-loader.gif' alt='' />"); DisplayBlogs(); });
function DisplayBlogs() { $.ajax({ type: "POST", url: "Default.aspx/GetBlogList", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { ApplyTemplate(msg); } }); } |
数据已经通过模板展现出来了,那接下来的事情就是添加动态搜索的功能。由于Quick Search是以页面上承载的数据作为搜索源的(通过attached属性来讲某个元素赋予Quick Search作为源),这其实就是我们要做的所有事情—设置搜索源。当然,我们还可以设置更多的参数来让它更符合我们的要求。具体的参数可以参考:http://rikrikrik.com/jquery/quicksearch/#options
当数据绑定完成后我们希望添加动态搜索功能,所以我们的代码应该加在success:function(msg)中,当应用玩模板,数据表被顺利生成后我们就将这个表attach给Quick Sorter来实现搜索。下边的代码设置了在table的上方显示搜索框,并在输入完搜索条件2000秒后触发搜索事件:
$("#blogList tbody tr").quicksearch({ labelText: 'Search: ', attached: '#blogList', position: 'before', delay: 2000, loaderText: '<img src="Ajax-loader.gif" alt="" height="20px" />', onAfter: function() { if ($('#blogList tbody tr:visible').length == 0) { $("#blogList tbody").html("<tr><td colspan='4'>No matched data</td></tr>"); } } }); |
你已经完成了所有的工作,来看看成果吧:
Table Sorter
接下来我们通过Table Sorter来添加排序的功能。你可以通过以下代码对名为myTable的Table添加排序支持,但没有任何样式或者默认的排序,而是实现反转排序。
$(document).ready(function() |
以下代码则给明为myTable的table添加了默认的排序:第一列和第三列。
$(document).ready(function() |
你可以指定更多的参数来让tablesorter更符合你的期望。请参考http://tablesorter.com/docs/#Configuration来获取参数。
在本例子中,我们想指定Header的样式来指示排序的不同状态。首先我们定义几个样式来控制header:
th.header { background-image: url(../img/bg.gif); cursor: pointer; font-weight: bold; background-repeat: no-repeat; background-position: center left; padding-left: 20px; border-right: 1px solid #dad9c7; margin-left: -1px; }
th.headerSortUp { background-image: url(../img/asc.gif); background-color: #3399FF; }
th.headerSortDown { background-image: url(../img/desc.gif); background-color: #3399FF; } |
注意:将Header类定义在headerSortUp和headerSortDown类之前,因为-->
- 该日志由 ningzuojun 于12年前发表在综合分类下,最后更新于 2012年02月24日.
- 转载请注明: 使用用jQuery和QuickSearch、TableSorter插件来增强界面交互 | 学步园 +复制链接