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.
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).
Related
I have a problem when returning a div using jQuery. The attached code below works only until the first display of childRow content, unfortunately not later. This is probably due to returning an item with the same ID, does anyone have an idea how else to return this div?
Script
function format () {
return $('#myDiv');
}
(document).ready(function() {
var table = $('#myTable').DataTable( {
// table settings
} );
$('#myTable tbody').on('click', 'td', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
row.child.hide();
}
else {
row.child( format() ).show();
}
} );
} );
myDiv
div(id="myDiv" class="container"){
//some images
//some java bean references
}
I was able to solve the problem by changing the Javascript library files, according to the example
Evening All,
I'm using this jQuery example from Datatables
https://www.datatables.net/examples/api/multi_filter.html
I would like to place the Search Boxes that currently appear on the bottom of the page underneath the headings e.g. so I still have the bold headings that have the ability to sort but below are the filter boxes where I can filter if needs be.
There are some comments on the page with JavaScript claiming to work however I just cant get anything to work exactly how I would like it!?!
Any help would be much appreciated!!!
The following fiddle has minimal changes in an attempt to achieve what you describe in your question (moving the input sort boxes below the table header titles):
https://jsfiddle.net/r1dbw6u2/4/
The javascript changes featured can be summarized as:
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example thead th').each( function () {
var title = $(this).text();
$(this).append( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.header() ).on( 'click', function(e) {
e.stopPropagation();
} );
$( 'input', this.header() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
In jquery datatable i am getting error table.column is not a function
<script>
$(document).ready(function() {
var table = $('#lsotable').dataTable();
$("#lsotable thead th").each( function ( i ) {
var select = $('<select><option value=""></option></select>')
.appendTo( $(this).empty() )
.on( 'change', function () {
table.column( i )
.search( $(this).val() )
.draw();
} );
table.column( i ).data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
} );
</script>
I am getiing the table data from while loops, i want it should be only three columns, how i can do .
Just change the dataTable() to DataTable() as shown below.
var table = $('#lsotable').DataTable();
Looks like you are using older version of datatable library. I tried with Datatable version 1.10.12 and it works fine.
Those who are struggling with a similar type of problem in datatable version 1.9.* can have a look on here: Link
I'm currently developing a Human Resource systems for a company. I'm using PHP5 and MySQL as my every go tools. I have came across a table tool called "Multi Filter Datatables", which enables me to query/filter data without going through mysql query, anyways the data from the tables are from the mysql tables from the backend.. I implemented it without any problems, got it working. Now I just got one question, how can I remove pagination? I would like to display all data because when I'm printing the table, it only shows page 1. It only captures the current built of the table.. I have researched some answers here on Stack, but I can't seem to get it work.. Here is the script..Thanks in advance..
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.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>'+d+'</option>' )
} );
}
);
}
} );
} );
</script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This got into my head lately and honestly I think its worth asking. Here is the thingy..
I have a table , just like any other ordinary table with jquery tablesorter plugin with the filter widget. On the very right of the table columns I've put a checkbox and above that column, on the table headers on that columhn I have another checkbox which has a function linked to it, so that when it gets clicked all the checkboxes get updated with this checkbox's value .
This is not very fancy or sophisticated and I have two way of accomplishing this .. either using a jquery selector or plain old javascript.
so here is what I want todo .. I want to filter elements of the table, then click the checkbox on the header , and I want to affect the row's checkboxes that were filtered with the plugin.
anyone has something to say about this?
thanks .
I already have a demo set up for that here
$( function() {
// using .on() which requires jQuery 1.7+
$( 'table' ).on( 'tablesorter-initialized', function() {
// class name to add on tr when checkbox is checked
var highlightClass = 'checked',
// resort the table after the checkbox is modified?
resort = true,
// if a server side database needs to be updated, do it here
serverCallback = function( table, inputElement ) {},
$table = $( this ),
c = this.config,
wo = c && c.widgetOptions,
// include sticky header checkbox; if installed
$sticky = c && wo.$sticky || '',
doChecky = function( c, col ) {
$table
.children( 'tbody' )
.children( 'tr:visible' )
.children( 'td:nth-child( ' + ( parseInt( col, 10 ) + 1 ) + ' )' )
.find( 'input[type=checkbox]' )
.each( function() {
this.checked = c;
$( this ).trigger( 'change' );
});
};
$table
.children( 'tbody' )
.on( 'change', 'input[type=checkbox]', function() {
// ignore change if updating all rows
if ( $table[0].ignoreChange ) { return; }
var col, $this = $( this );
$this.closest( 'tr' ).toggleClass( highlightClass, this.checked );
$this.trigger( 'updateCell', [ $this.closest( 'td' ), resort ] );
// if your server side database needs more parameters, add them here sent to the callback
serverCallback( $table[0], this );
// uncheck header if any checkboxes are unchecked
if ( !this.checked ) {
$table.add( $sticky ).find( 'thead input[type=checkbox]' ).prop( 'checked', false );
}
})
.end()
.add( $sticky )
.find( 'thead input[type=checkbox]' )
// Click on checkbox in table header to toggle all inputs
.on( 'change', function() {
// prevent updateCell for every cell
$table[0].ignoreChange = true;
var c = this.checked,
col = $( this ).closest( 'th' ).attr( 'data-column' );
doChecky( c, col );
// update main & sticky header
$table.add( $sticky ).find( 'th[data-column=' + col + '] input[type=checkbox]' ).prop( 'checked', c );
$table.children( 'tbody' ).children( 'tr:visible' ).toggleClass( highlightClass, c );
// update all at once
$table[0].ignoreChange = false;
$table.trigger( 'update', [ resort ] );
})
.on( 'mouseup', function() {
return false;
});
});
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'stickyHeaders','filter'],
headers: {
0: { sorter: 'checkbox' }
}
});
});
Just make sure to include the parser-input-select.js file