We Keep Coding

How to return a div using jQuery in a DataTable child row

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

How to detect empty table when selecting a row in a jQuery Datatable

Giving a simple table like this
<table id="exampleTable" class="table hover nowrap">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead></table>
Also, using the jQuery Datatable plugin and making the rows selectable, like in this example. The Javascript goes like this:
var exampleTable = $("#exampleTable").DataTable(
{
"bDestroy": true,
"lengthChange": false,
"bPaginate": false
});
$('#exampleTable tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
$('#exampleTable tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
So, when the table is empty, it shows a selectable row which says something like:
No data available in table
How to detect the table is empty and not allow selection on that kind of "message rows"?
Here is a fiddle with the code.

you can check if there is td with the class dataTables_empty like this:
$('#exampleTable tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else if(! $(this).find('td.dataTables_empty').length){
$('#exampleTable').DataTable().rows().nodes().each(function(){
$(this).removeClass('selected');
});
$(this).addClass('selected');
}
} );

You can use the - .row().data() method to see if there is data. if this returns undefined, you can disable selection of the row.
i also think this would be an ideal solution instead of dom traversal which is more expensive. what do you guys think ?
below is the updated fiddle. you can comment the tbody from the html to test it.
Let me know if this helps.
Modified Fiddle

inside your click method, add before everything
if($('#exampleTable tbody tr td').length == 1){
return;
}

jQuery DataTables JavaScript move search boxes

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();
}
} );
} );

How to filter table rows with jQuery

I have made a table here : fiddle but I seem unable to get my table filter to work. What I tried to do was create a menu at the top where a specific filter would only show those rows. I tried to use .Data for this.
Filter Row Script
$('.filterMenu a').on('click', function(e){
e.preventDefault();
var c= $(this).data('qtype');
$('#questTable')[0].className = c;
});
Row Hover Script
$(document).ready(function() {
$('.table-row').hover(function() {
$(this).addClass('current-row');
}, function() {
$(this).removeClass('current-row');
});
});
Row hide Script
$(document).ready(function() {
$('tr')
.filter(':has(:checkbox:checked)')
.addClass('selected')
.end()
.click(function(event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
})
.find(':checkbox')
.click(function(event) {
$(this).parents('tr:first').toggleClass('selected');
});
});

Here is a working example
The basic idea is to first hide all rows and then recursively show them, when they match your criteria.
Find all tr in tbody and hide them
var trs = $("#questTable").find("tbody tr");
trs.hide();
I would make use of the filter function
.filter(function (i, v) {})
to check if the row should be shown.
trs.filter(function (i, v) {
if ($(this).data("qtype") == c) {
return true;
}
if(c=="all"){
return true;
}
return false;
})
//just show the row if it fits the criteria
.show();
Additionally I have fixed your typo msq -> mcq for the data-qtype in tr
Edit: Just updated the fiddle with more comments and fixed the thead area

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.

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).