13

DataTables 検索バーで、子行内のコンテンツを検索できません。

これに対する答えを見つけるために広範囲に検索しました（1、2、3、4、5、6、7、8、9）が、この問題に関する回答はほとんどまたはまったくありません。

簡単なjsfiddleとDataTables デバッガーの結果を次に示します。

テーブルで内線番号 (子行にある) を検索したいのですが、内線番号の 1 つを検索バーに入力しても検索結果がありません。

これを追加して、この投稿の解決策を試しました：

table.columns().every( function () {
    var that = this;
    var header = this.header();

    $( 'input', this.footer() ).on( 'keyup change', function () {
        that
        .column( header.getAttribute('data-search-index')*1 ) // *1 to make it a number
        .search( this.value )
        .draw();
    } );
} );

...しかし、上記の jsfiddleでわかるように、まだ機能しません。

誰かが私を助けてくれますか？

ありがとう

4

4 に答える 4

14

解決

jQuery DataTables で子行を検索するには、子行に表示されるデータを非表示の列としてメイン テーブルに追加する必要があります。

たとえば、以下に示すように、オプションをextn使用してデータ プロパティの非表示の列を追加できます。columns.visible

JavaScript:

    "columns": [
        {
            "class":          'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "salary" },
        { "data": "extn", "visible": false }            
    ],

HTML :

<thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Extn.</th>
    </tr>
</thead>

デモ

コードとデモについては、この jsFiddleを参照してください。5407データが子行にしか表示されない場合でも、検索すると最初の行が表示されます。

于 2015-10-23T02:36:38.920 に答える
1

これはかなり古いスレッドであり、受け入れられた答えは機能しますが、別の解決策を提案したかったのです。

私は子行内を検索できないという同じ問題を抱えていました.私の解決策は<td>、子行のデータを含むテーブルの最後に非表示を作成することでした. .

限定された HTML のために、新しい列を追加しました。

<th class="hidden">Data</th>

次に、DataTables 呼び出し内で:

//Within var table = $('#table').DataTable( {....
columns : [
        //{ className : 'details-control'},
        { data : 'a' }, //a-e are the columns I want the user to see.
        { data : 'b' },
        { data : 'c' },
        { data : 'd' },
        { data : 'e' },            
        // this last one is my "index helper"
        { data : 'comments',
          render : function(data, type, full, meta) {
            return full.f + full.g + full.h + full.i;
          }
         }
    ],

次に、この列を非表示にするだけです。これは、DataTables の推奨される方法のいずれかを使用して実行できます。

https://datatables.net/examples/basic_init/hidden_​​columns.html

または私が選んだ方法を通して：

"createdRow" : function (row,data,index) {
    $('td',row).eq(6).addClass('hidden');
}

//and the css...
.hidden {
 visibility: hidden;
}

子行のすべてを含むテーブルの最後に1 つ残っています<td>が、それは非表示であり、検索ボックス/フィルターで動作します。

于 2015-08-31T15:32:37.847 に答える