2

CDE Pentaho のテーブル コンポーネントはデータブルに基づいています。この機能をテーブルに実装したかったhttps://datatables.net/examples/api/multi_filter.html 

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );
} );

私はそれを動作させることができません.Error processing componentメッセージが表示されました.jsスニペットとして、外部ソースとして、ポストフェッチおよびポスト実行関数に含めようとしました.すべての列のインデックスの欠如が原因であると考えました.問題、出力オプションにインデックスを含めましたが、どちらも機能しませんでした。

私はまた、この代替http://jsfiddle.net/CmMfJ/2/#collaborateを見つけました 

var table = $('#example').DataTable();

$("#example tfoot th").each( function ( i ) {
  var select = $('<select><option value="">All</option></select>')
    .appendTo( $(this).empty() )
    .on( 'change', function () {
       var term =  $(this).val()!=='' ?   '^'+$(this).val()+'$' : '';
       table.column( i )
          .search(term, true, false )
          .draw();
       } );

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

そのコードでエラーは発生しませんでしたが、機能しません。テーブルは変更されません。どちらの場合も、ポスト実行関数でこれを行いました: function f(){ code }、変数 #example も変更しました私のテーブルの名前については、何も機能しませんでした。

4

1 に答える 1

0

あなたの postExecution アプローチは正しいかもしれませんが、その div に新しい DataTable を作成することはできません。すでに作成されています。

postExecution の実行中に this オブジェクトを調べると、フィールドの 1 つ (どれを思い出せないか) から DataTable オブジェクト (例の var テーブル) にアクセスできます。

于 2014-10-21T17:02:44.780 に答える