I have a datatable that is editable, and each row has a "child" datatable.
The problem is that the child datatable has so many fields, and I would like to transpose it to have a vertical orientation.
Meaning that the field headers are rows and the table data show as columns...
Please note that each child table has only one row of data, so the resulting transposed data table should consist of 2 columns, one for headers and the other for the data...
Also note that I have disabled pagination, filters and sorting for the child datatable, but I have initialized it to be support inline editing...
It is of the following structure:
$('#myDataTable tbody').on('click', 'tr.group + tr td.details-control', function () {
//console.log($(this).closest('tr'));
var tr = $(this).closest('tr');
var row = table.row(tr);
//console.log(table.row(tr).data());
if (row.child.isShown())
{
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
var batata= $('#myDataTablex').DataTable({
"info":false,
"bFilter": false,
"bSort": false,
"bPaginate":false
});
$('#myDataTablex').dataTable().makeEditable({
"aoColumns": [
......columnByColumnDefinitions here...]
});
}
});
});
Related
I am using the jquery plugin datatable
https://datatables.net/
And I would like to hide some row during the process,
$(".menu_time_table tbody tr").hide();
$.each(obj, function (i, v) {
if (v.user_type === "2") {
$(".student_time_" + v.share_to).parent().show();
} else {
$(".teacher_time_" + v.share_to).parent().show();
}
});
finally, at setup the datatable, are there any way to not count the hidden row in the result? e.g. Now the problem is , if total rows are 200, hidden rows are 100, then the datatable shows there are 200 rows.
$('.menu_time_table').DataTable({
"order": [[0, "asc"]],
"language": table_lang,
"bDestroy": true,
"deferRender": true
});
Thanks a lot for helping.
I have a datatable, I want to color code the column based value in the last row.
If the TYPE value is "O" then apply yellow color, otherwise nothing. My columns are dynamic.
expected result:
var dt= $(element).dataTable({
deferRender: true,
destroy: true,
"aaData": data, // data is coming from service
"aoColumns": columns // column is dynamic
});
SOLUTION
You can use drawCallback to handle table draw event and enumerate columns data with columns().every() to find columns containing required values and highlight them.
var table = $('#example').DataTable({
drawCallback: function(){
var api = this.api();
api.columns().every( function () {
var data = this.data();
if($.inArray('O', data) !== -1){
$(this.nodes()).addClass('highlight');
} else {
$(this.nodes()).removeClass('highlight');
}
});
}
});
Please note that the code above detects O in all rows. To handle only the last row you need to add more code.
DEMO
See this jsFiddle for code and demonstration.
Use the rowCallback
$(element).dataTable({
"rowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
switch(aData[0]){
case 'O':
$(nRow).css('backgroundColor', 'yellow');
//also style other rows here
break;
}
}
});
Simple demo: Fiddle
I have the following JS
$(document).ready(function() {
var table = $('#example').DataTable( {
"scrollY": "200px",
"paging": false
} );
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
} );
JSFiddle or DataTablesExample
Which produce the following table that allows user to toggle the six columns by clicking on the link next to Toggle column.
What I want to do then is to make the table to show only Name and Position column as default and hide the rest of columns. Only when the user toggle their preferred other columns then they will appear. How can this be achieved?
In reality I have ~50 columns to show. Currently it overflow the page.
Not sure what's the best way to display such case.
With ColVis
You need to use ColVis extension for Datatables.
Most likely you would want to hide some columns initially, you can do that using the code below.
var oTable = $('#example').DataTable({
"dom": 'C<"clear">lfrtip',
"columnDefs" : [
{ "targets": [4,5], "visible": false }
]
});
See this JSFiddle for demonstration.
Also ColVis extension allows you to group columns and toggle group visibility instead of individual columns which could be helpful if you have 50 fields.
If you have that many fields, I would also consider showing extra details or responsive extension along with ColVis, you may be able to integrate these together.
Without ColVis
It can also be done without ColVis using the code below:
HTML
<p>Toggle: Start date | Salary</p>
<table id="example" class="display" cellspacing="0" width="100%">
<!-- skipped -->
</table>
JavaScript
var oTable = $('#example').DataTable({
"dom": 'lfrtip',
"columnDefs" : [
{ "targets": [4,5], "visible": false }
]
});
$('a.column-toggle').on('click', function(e){
var column = oTable.column($(this).data('id'));
column.visible(!column.visible());
e.preventDefault();
});
See this JSFiddle for demonstration.
You could show the remaining information in the child table
see: https://www.datatables.net/examples/api/row_details.html
I have already assigned some columns to hide from list but I am unable to hide those column's search option in datatables and php.
"aoColumnDefs": [{
"bVisible": false,
"aTargets" : [0,8,11,12,15]
}
]
this is for creating the select box for searching individual column.
$("thead th").each( function ( i ) {
this.innerHTML += fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
Now could you please tell me what to do so that the corresponding select box which is appearing top of the column for individual column search will be disappeared?
Thanks in advance.
are there any way to add new column to the table with JQuery plugin DataTables?
Well it depends on what you need it for... if you just want to have columns hidden, then reveal them at a later time, then you'd do this to toggle the column (from the docs)
function fnShowHide( iCol )
{
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var oTable = $('#example').dataTable();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
The plugin doesn't have an interface (as far as I'm aware) for adding columns, but ordinary jQuery seems to do the trick:
$('#example thead tr,#example tfoot tr').append('<th>New title</th>');
$('#example tbody tr').append('<td />');