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

ソースを次のように変更します (datatables フォーラム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 に答える