Passing Variable -- DataTables w/POD (WordPress Plugin)
Passing Variable -- DataTables w/POD (WordPress Plugin)
Hi,
My project integrates DataTables with POD (http://podscms.org/) (WordPress plugin) CMS framework.
Specifically, I am emulating "hidden row details" example. Passing variable to html is successful. However, extending the variables to the hidden row details fails.
[code]
Address
Resident
Telephone
HOA Board
<?php
$resident = new Pod('residents');
$resident->findRecords('name ASC');
$residents = $resident->getTotalRows();
if ($residents>0) :
while ($resident->fetchRecord()) :
$resident_id = $resident->get_field('id');
$resident_name = $resident->get_field('name');
$resident_slug = $resident->get_field('slug');
$resident_address = $resident->get_field('res_address');
$resident_telephone = $resident->get_field('res_telephone_1');
$resident_privacy_email = $resident->get_field('res_privacy_receive_email');
$resident_privacy_listing = $resident->get_field('res_privacy_online_listing');
$resident_hoa = $resident->get_field('hoa_board_director');
?>
<?php echo $resident_address; ?>
<?php if ($resident_privacy_listing == 1){echo $resident_name;}else{echo '(Private!)';}?>
<?php if ($resident_privacy_listing == 1){echo $resident_telephone;}else{echo '(Private!)';}?>
<?php if ($resident_hoa == 1){echo 'Yes';}else{echo '—';}?>
<?php endwhile; endif; ?>
[/code]
[code]
/**
* DataTables -------------------------------------------------------------------------------------
*/
// Formating function for row details
function fnFormatDetails (oTable, nTr){
var aData = oTable.fnGetData(nTr);
var sOut = '';
sOut += 'Sub-Heading:'+aData[1]+' '+aData[2]+'';
sOut += 'Sub-Heading:Description of the sub-heading callout.';
sOut += '';
return sOut;
}
// Insert a 'details' column to the table
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('#example thead tr').each(function(){this.insertBefore(nCloneTh, this.childNodes[0]);});
$('#example tbody tr').each(function(){this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);});
// DataTables initialisation
oTable = $('#example').dataTable({
"bJQueryUI": true,
//"sScrollY": 80,
"sPaginationType": "full_numbers",
"iDisplayLength": 5,
"bLengthChange": true,
"aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
"aoColumns": [
null,
{"bSortable": false},
{"sSortDataType": "dom-text"},
{"bSortable": false},
{"sSortDataType": "dom-select", "sClass": "center"}, // class="center" of last column
//{"bSortable": false}
],
"aoColumnDefs": [
{"bSortable": false, "aTargets": [0]} // initialse DataTables, with no sorting on the 'details' column
],
});
oTable.fnSort([[1,'asc'], [3,'asc'] ]); // sort RESIDENT and HOA BOARD columns.
// Add event listener for opening and closing details
$('#example tbody td img').live('click', function(){
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close')){
/* This row is already open - close it */
this.src = '<?php bloginfo('template_directory'); ?>/js/DataTables-1.7.5/examples/examples_support/details_open.png';
oTable.fnClose(nTr);
}else{
/* Open this row */
this.src = '<?php bloginfo('template_directory'); ?>/js/DataTables-1.7.5/examples/examples_support/details_close.png';
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
});
[/code]
I tried manipulating [code]function fnFormatDetails (oTable, nTr)[/code] function with no success.
Could you please point me to the right direction to amend this code?
Thanks in advance,
Arthur
My project integrates DataTables with POD (http://podscms.org/) (WordPress plugin) CMS framework.
Specifically, I am emulating "hidden row details" example. Passing variable to html is successful. However, extending the variables to the hidden row details fails.
[code]
Address
Resident
Telephone
HOA Board
<?php
$resident = new Pod('residents');
$resident->findRecords('name ASC');
$residents = $resident->getTotalRows();
if ($residents>0) :
while ($resident->fetchRecord()) :
$resident_id = $resident->get_field('id');
$resident_name = $resident->get_field('name');
$resident_slug = $resident->get_field('slug');
$resident_address = $resident->get_field('res_address');
$resident_telephone = $resident->get_field('res_telephone_1');
$resident_privacy_email = $resident->get_field('res_privacy_receive_email');
$resident_privacy_listing = $resident->get_field('res_privacy_online_listing');
$resident_hoa = $resident->get_field('hoa_board_director');
?>
<?php echo $resident_address; ?>
<?php if ($resident_privacy_listing == 1){echo $resident_name;}else{echo '(Private!)';}?>
<?php if ($resident_privacy_listing == 1){echo $resident_telephone;}else{echo '(Private!)';}?>
<?php if ($resident_hoa == 1){echo 'Yes';}else{echo '—';}?>
<?php endwhile; endif; ?>
[/code]
[code]
/**
* DataTables -------------------------------------------------------------------------------------
*/
// Formating function for row details
function fnFormatDetails (oTable, nTr){
var aData = oTable.fnGetData(nTr);
var sOut = '';
sOut += 'Sub-Heading:'+aData[1]+' '+aData[2]+'';
sOut += 'Sub-Heading:Description of the sub-heading callout.';
sOut += '';
return sOut;
}
// Insert a 'details' column to the table
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('#example thead tr').each(function(){this.insertBefore(nCloneTh, this.childNodes[0]);});
$('#example tbody tr').each(function(){this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);});
// DataTables initialisation
oTable = $('#example').dataTable({
"bJQueryUI": true,
//"sScrollY": 80,
"sPaginationType": "full_numbers",
"iDisplayLength": 5,
"bLengthChange": true,
"aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
"aoColumns": [
null,
{"bSortable": false},
{"sSortDataType": "dom-text"},
{"bSortable": false},
{"sSortDataType": "dom-select", "sClass": "center"}, // class="center" of last column
//{"bSortable": false}
],
"aoColumnDefs": [
{"bSortable": false, "aTargets": [0]} // initialse DataTables, with no sorting on the 'details' column
],
});
oTable.fnSort([[1,'asc'], [3,'asc'] ]); // sort RESIDENT and HOA BOARD columns.
// Add event listener for opening and closing details
$('#example tbody td img').live('click', function(){
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close')){
/* This row is already open - close it */
this.src = '<?php bloginfo('template_directory'); ?>/js/DataTables-1.7.5/examples/examples_support/details_open.png';
oTable.fnClose(nTr);
}else{
/* Open this row */
this.src = '<?php bloginfo('template_directory'); ?>/js/DataTables-1.7.5/examples/examples_support/details_close.png';
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
});
[/code]
I tried manipulating [code]function fnFormatDetails (oTable, nTr)[/code] function with no success.
Could you please point me to the right direction to amend this code?
Thanks in advance,
Arthur
This discussion has been closed.