jQuery DataTables:按列过滤

3

我有一个DataTables表格,它通过AJAX源获取数据。我已经成功运行了该表格,搜索也可以工作。

现在我收到了一个请求,要求为每一列实现搜索字段。似乎有一个DataTables插件用于列过滤,我尝试使用它。

这是我的HTML代码:

<!DOCTYPE HTML>
<html>
<head>
    <title>testpage</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.company.com/content/dam/workflows/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#overview").dataTable({
            aoColumnDefs:[{
                aTargets: [0]
            }],
            bAutoWidth: false,
            bLengthChange: false,
            iDisplayLength: 10,
            sAjaxSource: "http://server/api.jsp?someparameters"
        }).columnFilter();
    })
    </script>
</head>

<body>

<table id="overview">
<tr>
    <thead>
        <th>#</th>
        <th>Betrieb</th>
        <th>Status</th>
        <th>Anlagenummer</th>
        <th>Bezeichnung</th>
    </thead>
</tr>
</table>

</body>
</html>

正如您所见,我刚刚附加了columnFilter()方法。在控制台中它甚至没有抛出错误,但是表格看起来与之前完全相同(没有额外的输入框来搜索列)。

我做错了什么吗?可能是因为数据源是AJAX引起的吗?


<tfoot> 标签在哪里? - asprin
哦,我的天啊... 真不敢相信我没看到那个,非常感谢! - Ahatius
1个回答

2
我认为您需要在HTML表格中定义页脚部分。请参考这个例子
表格应该长这样:
<table>
    <thead>
        <tr>...</tr>
    </thead>
    <tfoot>
        <tr>...</tr>
    </tfoot>
</table>

谢谢伙计,那正是导致问题的原因! - Ahatius
我无法在DataTables 1.10.2中使其工作。它应该可以在1.10.+上工作吗?该插件的演示网站仅使用Datatables 1.8和1.9,时间还停留在2011-2012年。我有一种不好的预感它已经过时了 :( - Csaba Toth

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接