Question

我正在使用两个插件，tablesorter和quicksearch，用于jQuery。

我发现这个网站：http://beckelman.net/2008/11/20/jquery-tablesorter-and-quicksearch-plugins-together-demo/并且几乎将代码复制到我的网站中，但它不允许我像插件允许的那样搜索/过滤。

我已经使用了tablesorter，但是quicksearch函数却没有。我想这可能是因为我正在调用一个带有HTML内容的PHP页面，它填充了我的表格。我尝试了几种不同的方法并做了一些研究，并且无法修改以下代码进行搜索。

一些注意事项：

在$（“＃myTable tbody tr”）的上下文中使用'tr'。快速搜索没有做任何事情，但如果我将其切换到td，它将过滤表，而不是任何数据（表数据完全消失）再次，tablesorter正常工作没有问题，但quicksearch功能没有。

<script type="text/javascript">
$(document).ready(function() { 
    $("#myTable").tablesorter(); 
    $.get("/html/ajax-content.php", function(html) { 
                $("#myTable").append(html); 
                $("#myTable").trigger("update"); 
                var sorting = [[2,1],[0,0]]; 
                // sort on the first column 
                $("#myTable").trigger("sorton",[sorting]); 
            }); 

    $("#ajax-append").click(function() { 

            $.get("/html/ajax-content.php", function(html) { 
                // append the "ajax'd" data to the table body 
                $("#myTable td:gt(0)").remove();
                $("#myTable").append(html); 
                $("#myTable").trigger("update"); 
                var sorting = [[2,1],[0,0]]; 
                // sort on the first column 
                $("#myTable").trigger("sorton",[sorting]); 
                $("#myTable td:last").remove();
            }); 
    return false; 
    });

});   
</script>
<script type="text/javascript">
$("#myTable tbody tr").quicksearch({
        labelText: 'Search: ',
        attached: '#myTable',
        position: 'before',
        delay: 100,
        loaderText: 'Loading...',
        onAfter: function() {
            if ($("#myTable tbody tr:visible").length != 0) {
                $("#myTable").trigger("update");
                $("#myTable").trigger("appendCache");
                $("myTable tfoot tr").hide();
            }
            else {
                $("myTable tfoot tr").show();
            }
        }
    });
    </script>

HTML

<div class="container">
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
    <a class="brand" href="#"><img height="50px" src="pizzaphone2.png" /></a>
        <div class="container">

            <ul class="nav pull-right">
                <li><div href="#" id="ajax-append" class="btn btn-success">Refresh</div></a></li>

            </ul>
                <form class="navbar-search pull-right">
                        <input type="text" class="search-query" id="search" placeholder="Quick Search">
                </form> 
    </div>
</div>
</div>

QuickSearch插件无法使用tablesorter

0 个答案: