Individual column searching in Pentaho CDE BI server

Table component in CDE Pentaho is based on datables, I wanted to implement this functionality in my tables 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();
        } );
    } );
} );

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,

I also found this alternative 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>' )
  });
});

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.

Answers:

Answer

your postExecution approach might be the right one but you can't create a new DataTable over that div. It has already been created.

If you inspect the this object during the postExecution execution, one of the fields (can't remember which) gives you access to your DataTable object (the var table on your example).

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.