title: Individual column searching in Pentaho CDE BI server
body: <p>Table component in CDE Pentaho is based on datables, I wanted to implement this functionality in my tables <a href="https://datatables.net/examples/api/multi_filter.html" rel="nofollow">https://datatables.net/examples/api/multi_filter.html</a> </p>
  
  <pre><code>$(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( '&lt;input type="text" placeholder="Search '+title+'" /&gt;' );
      } );
  
      // 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();
          } );
      } );
  } );
  </code></pre>
  
  <p>I can't get it to work, I got Error processing component message,  I tried including it as js snippet, as an external source, in post fetch and in post execution function, I thought that the lack of indexes for every column was causing the problem, I included the indexes in output options, it didn't work either, </p>
  
  <p>I also found this alternative <a href="http://jsfiddle.net/CmMfJ/2/#collaborate" rel="nofollow">http://jsfiddle.net/CmMfJ/2/#collaborate</a> </p>
  
  <pre><code>var table = $('#example').DataTable();
  
  $("#example tfoot th").each( function ( i ) {
    var select = $('&lt;select&gt;&lt;option value=""&gt;All&lt;/option&gt;&lt;/select&gt;')
      .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( '&lt;option value="'+d+'"&gt;'+d+'&lt;/option&gt;' )
    });
  });
  </code></pre>
  
  <p>I didn't get any errors with that code but it doesn't work, the table doesn't change, in both cases In Post Execution function I did this: function f(){ code }, I also changed the variable #example for the name of my table, nothing worked, any help would be really appreciated, thanks.</p>