0

我已经让DataTables jQuery 插件工作了，它的插件ColumnFilterWidgets在大多数情况下成功地过滤了结果。

但是，当我尝试过滤的单元格/列包含 HTML 时，我遇到了问题——在我的例子中，是逗号分隔的超链接。下拉选择已正确创建，但每个选项不仅包含文本，还包含完整的超链接代码。当过滤器运行时，它不返回任何结果。

这个问题显然已经存在了一段时间，但我尝试过的任何方法都没有解决它（包括该线程中的修复）。

这是我初始化数据表并设置过滤器的代码：

var oTable = $('#pub_table').dataTable( {
                "oLanguage": {
                    "sSearch": "<h5><i class='icon-search icon-large'></i>&nbsp;Search Publications</h5>"
                },
                "sDom": 'W<"clear">lfrtip',
                "oColumnFilterWidgets": {
                    "sSeparator": ", ",
                    "aiExclude": [ 0 ],
                    "bGroupTerms": true,
                }
            } );

我的表代码是 php 生成的，但很简单，这是数据表正在使用的结果数据集的示例：

<table id="pub_table" width="100%" class="pretty">

<thead>
    <tr>
        <th class="resource_title">Resource</th>
        <th class="resource_libraries">Library</th>
        <th class="resource_audiences">Target Audience</th>
        <th class="resource_topics">Topic</th>
        <th class="resource_types">Type</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/resources/a-video-resource/" rel="bookmark" title="A video resource">A video resource</a></td>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/libraries/advocacy/" rel="tag">Advocacy</a></td>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/audiences/staff/" rel="tag">Staff</a></td>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/topics/sample-topic-2/" rel="tag">Sample topic 2</a></td>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/types/download/" rel="tag">Download</a>, <a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/types/video/" rel="tag">Video</a></td>
    </tr>
    <tr>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/resources/social-media-guidelines-and-best-practices/" rel="bookmark" title="Social Media Guidelines and Best Practices">Social Media Guidelines and Best Practices</a></td>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/libraries/advocacy/" rel="tag">Advocacy</a>, <a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/libraries/board-governance/" rel="tag">Board Governance</a>, <a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/libraries/program-administration/" rel="tag">Program Administration</a></td>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/audiences/board-members/" rel="tag">Board Members</a>, <a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/audiences/staff/" rel="tag">Staff</a>, <a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/audiences/stakeholders/" rel="tag">Stakeholders</a>, <a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/audiences/volunteers/" rel="tag">Volunteers</a></td>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/topics/sample-topic-1/" rel="tag">Sample topic 1</a></td>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/types/article/" rel="tag">Article</a></td>
    </tr>
    <tr>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/resources/brand-guidelines/" rel="bookmark" title="Brand Guidelines">Brand Guidelines</a></td>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/libraries/program-administration/" rel="tag">Program Administration</a></td>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/audiences/board-members/" rel="tag">Board Members</a>, <a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/audiences/staff/" rel="tag">Staff</a></td>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/topics/sample-topic-1/" rel="tag">Sample topic 1</a></td>
        <td><a href="http://mwamp.1505garnaas.net/texascasa/wp/blog/types/download/" rel="tag">Download</a></td>
    </tr>

</tbody>
<tfoot>
    <tr>
        <th class="resource_title">Resource</th>
        <th class="resource_libraries">Library</th>
        <th class="resource_audiences">Target Audience</th>
        <th class="resource_topics">Topic</th>
        <th class="resource_types">Type</th>
    </tr>
</tfoot>

我已经进行了广泛的搜索，但无法弄清楚这一点。我对 jQuery 还很陌生，这无济于事。:) 任何指针？谢谢！

4

1 回答 1

1

将您的来源更改为（由数据表论坛提供http://datatables.net/forums/discussion/comment/41317#Comment_41317）

for (var i = 0, c = aiRows.length; i < c; i++) {
           iRow = aiRows[i];
           sValue = $('<div>' + this.fnGetData(iRow, iColumn) + '</div>').text();
           // ignore empty values?
           if (bIgnoreEmpty == true && sValue.length == 0) continue;

           // ignore unique values?
           else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;

           // else push the value onto the result data array
           else asResultData.push(sValue);
       }
于 2013-08-13T22:18:40.337 回答