Theme a div structure like a table using theme function
This is how you can set up your own theme function and converting the same data sent to Drupal theme function for "table" and instead get it as a DIV structure. You need to add some CSS or styling the DIV structure to make it look like desired. This code is for a module.
<?php
/**
* Declare your theme function
*/
function cdt_stats_theme() {
return array(
'cdt_stats_div' => array(
'arguments' => array('element' => NULL),
),
);
}
/**
* Declare your function
*/
function theme_cdt_stats_div($header, $rows, $attributes = array(), $caption = NULL) {
$output = '<div'. drupal_attributes($attributes) .">\n";
if (isset($caption)) {
$output .= '<div class="caption">'. $caption ."</div>\n";
}
// Format the table header:
if (count($header)) {
$ts = tablesort_init($header);
// HTML requires that the thead tag has tr tags in it follwed by tbody
// tags. Using ternary operator to check and see if we have any rows.
$output .= (count($rows) ? ' <div class="header"><div>' : ' <div>');
foreach ($header as $cell) {
$output .= "<div class='label'>".$cell['data']."</div>";
}
// Using ternary operator to close the tags based on whether or not there are rows
$output .= (count($rows) ? " </div></div>\n" : "</div>\n");
}
else {
$ts = array();
}
// Format the table rows:
if (count($rows)) {
$output .= "<div class='body'>\n";
$flip = array('even' => 'odd', 'odd' => 'even');
$class = 'even';
foreach ($rows as $number => $row) {
$attributes = array();
// Check if we're dealing with a simple or complex row
if (isset($row['data'])) {
foreach ($row as $key => $value) {
if ($key == 'data') {
$cells = $value;
}
else {
$attributes[$key] = $value;
}
}
}
else {
$cells = $row;
}
if (count($cells)) {
// Add odd/even class
$class = $flip[$class];
if (isset($attributes['class'])) {
$attributes['class'] .= ' '. $class;
}
else {
$attributes['class'] = $class;
}
// Build row
$output .= ' <div'. drupal_attributes($attributes) .'>';
$i = 0;
foreach ($cells as $cell) {
$output .= "<div class='cell ".$cell['class']."'>".$cell['data']."</div>";
}
$output .= " </div>\n";
}
}
$output .= "</div>\n";
}
$output .= "</div><div class='clear-both'></div>\n";
return $output;
}
/**
* Call your theme function for DIV with the same
* arrays used when calling theme('table'...)
*/
$tableHeaders[] = array(
'data' => t('Header 1'),
'class' => 'alignLeft cdt-stats-basic-header',
);
$tableHeaders[] = array(
'data' => t('Header 2'),
'class' => 'alignLeft cdt-stats-basic-header',
);
$tableHeaders[] = array(
'data' => t('Header 3'),
'class' => 'alignLeft cdt-stats-basic-header',
);
//Get some data....
$stats['value1'] = cdt_stats_detail($project_id, $month, "One");
$stats['value2'] = cdt_stats_detail($project_id, $month, "Two");
$stats['value3'] = cdt_stats_detail($project_id, $month, "Three");
//Singel value row, add an foreach() loop if you want more rows
$tdCells = array();
$tdCells[] = array(
'data' => $stats['value1']['value'],
'class' => 'alignLeft cdt-stats-basic-value',
);
$tdCells[] = array(
'data' => $stats['value2']['value'],
'class' => 'alignLeft cdt-stats-basic-value',
);
$tdCells[] = array(
'data' => $stats['value3']['value'],
'class' => 'alignLeft cdt-stats-basic-value',
);
$tableRows[] = $tdCells;
//End loop, if loop
$out = theme('cdt_stats_div', $tableHeaders, $tableRows, $attributes = array("class" => 'cdt-stats-basic-row'), $caption = NULL);
...
?>Knowledge keywords: