Question

我的DataTables jQuery plugin工作正常，其插件ColumnFilterWidgets在大多数情况下成功过滤了结果。

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

这个问题有apparently been around for a while，但我尝试过没有修复它（包括该线程中的修复）。

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

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没什么新意义。 :)任何指针？谢谢！

Answer 1

将您的来源更改为（由datatables forum 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);
       }

Datatables和ColumnFilterWidgets无效;需要从过滤器选择中删除HTML

1 个答案: