Expand Details by clicking on the Row
Expand Details by clicking on the Row
Hi,
I am using the following code to expand / collapse my rows (http://datatables.net/release-datatables/examples/api/row_details.html) by clicking on the tiny plus or minus image.
Is it possible that i can click on a row and not on the tiny icon to show the details? How does it work?
Thanks!
I am using the following code to expand / collapse my rows (http://datatables.net/release-datatables/examples/api/row_details.html) by clicking on the tiny plus or minus image.
Is it possible that i can click on a row and not on the tiny icon to show the details? How does it work?
Thanks!
This discussion has been closed.
Replies
Allan
I created a striped-down version of the http://datatables.net/ref example witch explain the basic functionality to me. There is only one question left: When i click on a row how do i make it that the other row(s) collapse? Here is the striped-down example for easy copy and paste use:
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
DataTables - MyDemo
@import "http://datatables.net/media/css/site.ccss";
th { white-space: nowrap; }
div.dataTables_filter input { padding: 5px; width: 250px; }
div.innerDetails { display: none; }
div.innerDetails {
margin: 1em;
}
div.column_details { float: left; width: 45%; }
div.column_details table td { font-size: 13px; }
div.column_code { float: left; width: 54%; }
div.purpose { height: 46px; overflow: hidden }
tr.odd { background-color: #f6f6ff; cursor: pointer; *cursor: hand }
tr.even { background-color: white; cursor: pointer; *cursor: hand }
td.details { cursor: default !important }
td.dataTables_empty { text-align: center; }
table.display>tbody>tr { border-left: 1px solid #ccc; border-right: 1px solid #ccc }
table.display { border-bottom: 1px solid #ccc; }
body {background: white;}
$(document).ready(function() {
var anOpen = [];
var sImageUrl = "http://datatables.net/release-datatables/examples/examples_support/";
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('#reference thead tr').each(function() {
this.insertBefore(nCloneTh, this.childNodes[0]);
});
$('#reference tbody tr').each(function() {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});
var search = "";
if(window.location.hash !== "") {
search = window.location.hash.substring(1);
}
var oTable = $('#reference').dataTable({
"bPaginate" : false,
"bSortClasses" : false,
"aaSorting" : [[1, 'asc']],
"oSearch" : {
"sSearch" : search
},
"aoColumns" : [{
"mDataProp" : null,
"bSortable" : false
}, {
"mDataProp" : 'Name'
}, {
"mDataProp" : 'Vorname'
}, {
"mDataProp" : 'Adresse'
}],
"fnInitComplete" : function() {
this.fnAdjustColumnSizing();
$('div.dataTables_filter input').focus();
}
});
$('#reference tbody tr').live('click', function() {
if($(this).hasClass('details')) {
return;
}
var nTr = this;
var i = $.inArray(nTr, anOpen);
var oData = oTable.fnGetData(nTr);
if(i === -1) {
if(oData.purpose_short != oData.purpose) {}
$('img', this).attr('src', sImageUrl + "details_close.png");
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
nDetailsRow.className += ' ' + nTr.className;
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push(nTr);
} else {
$('img', this).attr('src', sImageUrl + "details_open.png");
$('div.innerDetails', $(nTr).next()[0]).slideUp(function() {
oTable.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});
var tableData = oTable.fnGetData();
for(var i = 0, iLen = tableData.length; i < iLen; i++) {
if(search == tableData[i].parameter) {
$(oTable.fnSettings().aoData[i].nTr).click();
$('div.dataTables_filter input').focus();
}
}
});
function fnFormatDetails(oTable, nTr) {
var oData = oTable.fnGetData(nTr);
var sOut = '' + '' + '' + 'Parameter:' + 'meinWert1' + '' + 'Type:' + 'meinWert2' + '' + 'Default:' + 'meinWert3' + '' + '' + '' + '' + '';
return sOut;
}
Vorname
Name
Adresse
Spalte1-1Spalte2-aSpalte3-abc
Spalte1-2Spalte2-bSpalte3-def
Spalte1-3Spalte2-cSpalte3-xyz
[/code]
Allan