1

データ テーブルの Web サイトで説明されているように、すべての列のオプションを選択する機能については、以下で説明します。最初の列のドロップダウン値のみでテーブルデータをフィルタリングし、選択ドロップダウンを通常のヘッダーセクションではなく別の場所に配置するにはどうすればよいですか。たとえば、リンクを参照してください

initComplete: function () {
    var api = this.api();

    api.column().indexes().flatten().each( function (i) {
        var column = api.column(i);
        var select = $('<select><option value=""></option></select>').appendTo('$selectTriggerFilter').on( 'change', function () {
        var val = $.fn.dataTable.util.escapeRegex($(this).val());

             column.search( val ? '^'+val+'$' : '', true, false ).draw();
            } );

        column.data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        } );
    } );
}

次のコードを使用しています。dom オプションを削除するとすぐに選択オプションが表示されますが、dom がないわけではありません。

$(document).ready(function() {
     $('#tableTrigger').DataTable({

    "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
    searching: false,
    "scrollY": "200px",
    "dom": 'frtipS',
    "deferRender": true,

    initComplete: function () 
    {
        var api = this.api();

        api.columns().indexes().flatten().each( function ( i ) 
                {
                            if(i == 0){ //Create just one SelectBox
                                var select = $('<select class='+i+'><option value=""></option></select>')
                                            .appendTo( '#selectTriggerFilter')
                                            .on( 'change', function () {

                                        var val = $(this).val();
                                        column( i ).search( val ? '^'+$(this).val()+'$' : val, true, false ).draw();
                                    });

                                column( i ).data().unique().sort().each( function ( d, j ) {
                                    select.append( '<option value="'+d+'">'+d+'</option>' );
                                } );
                        }
                            else return;
               });
    } 

  }); 
});
4

2 に答える 2

2

原因

あなたのコードにはいくつかの問題があります:

  • searchingfalseそうしないとsearch()機能しません。
  • column変数が定義されていません

解決

以下、修正したコードです。

$(document).ready(function() {
   $('#tableTrigger').DataTable({
        "lengthMenu": [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "All"]
        ],
        "scrollY": "200px",
        "dom": 'rtipS',
        // searching: false,
        "deferRender": true,
        initComplete: function () {
           var column = this.api().column(0);
           var select = $('<select class="filter"><option value=""></option></select>')
               .appendTo('#selectTriggerFilter')
               .on('change', function () {
                  var val = $(this).val();
                  column.search(val ? '^' + $(this).val() + '$' : val, true, false).draw();
               });

           column.data().unique().sort().each(function (d, j) {
               select.append('<option value="' + d + '">' + d + '</option>');
           });
        }
    });
});

ノート

  • に設定して最初にそれを除外したかったと思うので、 を省略fしました。ドロップダウン フィルターと一緒に検索ボックスを使用する場合に含めます。"dom": 'frtipS'searchingfalsef

  • プロパティで省略してlengthMenuいる場合、設定の意味がありません。ldom

デモ

修正されたコードのデモについては、この jsFiddleを参照してください。

于 2015-05-03T17:54:24.483 に答える
-1

検索セクションは dom のどこにでも配置できます。次に、イベント呼び出し (クリック、選択、キーアップ)。以下のようにserach apiを呼び出します。

var dTable= $("example").DataTable();
dTable.columns(i).search(v).draw();

ここで、i はデータテーブル列のインデックスで、v は検索値です。

于 2015-02-16T07:47:06.350 に答える