使用用jQuery和QuickSearch、TableSorter插件来增强界面交互

核心提示： 在页面加载完成时我们通过jQuery请求得到blog列表信息并通过应用模板来展现：$(document).ready(function() {$("#content").html("<img src=http://tech.ddvip.com/2008-

在页面加载完成时我们通过jQuery请求得到blog列表信息并通过应用模板来展现：

$(document).ready(function() {
　　$("#content").html("<img src=http://tech.ddvip.com/2008-12/'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=http://tech.ddvip.com/2008-12/"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>");
　　　　}
　　}
});