custom table display - help turning static html to dynamic php

by Nathanael   Last Updated May 08, 2017 16:10 PM

I am trying to modify the list view of my Joomla component to display my table's data in a more user-friendly fashion. It currently simply displays all data in a regular table with columns and rows, like such: Current database list view

But I want the data to display partly in the title, partly in a drop-down menu. I have made an example of the format I am shooting for on jsfiddle.

The thing is, I am new to PHP and I am not sure how to turn my static HTML code into dynamic PHP code. I want each row to display its data with an independently-functioning dropdown menu (the click events are currently linked together). What's more, I want each row to have its own "indicator light" which shows how full each classroom is based on that row's own cap and att values.

If I could see some example code, it would be very helpful. I need to dynamically fill each session menu and dynamically change the status indicator using javascript. It's just too big of a next step to wrap my mind around all at once.

I assume I need to put my rows in a list format, fill the list out dynamically using PHP, and then somehow iterate through a loop in my javascript, calling the att/ cap values for each row and modifying the respective css values for ul .sessions li:nth-child(x).css('background','red');

Here is the code for my current table display, in case it is helpful:

    <table class="table table-striped" id="sessionList">
        <thead>
        <tr>
            <?php if (isset($this->items[0]->state)): ?>
                <th width="5%">
    <?php echo JHtml::_('grid.sort', 'JPUBLISHED', 'a.state', $listDirn, $listOrder); ?>
</th>
            <?php endif; ?>

                            <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_ID', 'a.id', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_DATE', 'a.date', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_TIME', 'a.time', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_TITLE', 'a.title', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_TEACHER', 'a.teacher', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_LVL', 'a.lvl', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_NOTES', 'a.notes', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_JR', 'a.jr', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_CAP', 'a.cap', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_ATT', 'a.att', $listDirn, $listOrder); ?>
                </th>
                <th class=''>
                <?php echo JHtml::_('grid.sort',  'COM_MERAKIAC_SESSIONS_SID', 'a.sid', $listDirn, $listOrder); ?>
                </th>


                            <?php if ($canEdit || $canDelete): ?>
                    <th class="center">
                <?php echo JText::_('COM_MERAKIAC_SESSIONS_ACTIONS'); ?>
                </th>
                <?php endif; ?>

        </tr>
        </thead>
        <tfoot>
        <tr>
            <td colspan="<?php echo isset($this->items[0]) ? count(get_object_vars($this->items[0])) : 10; ?>">
                <?php echo $this->pagination->getListFooter(); ?>
            </td>
        </tr>
        </tfoot>
        <tbody>
        <?php foreach ($this->items as $i => $item) : ?>
            <?php $canEdit = $user->authorise('core.edit', 'com_merakiac'); ?>

                            <?php if (!$canEdit && $user->authorise('core.edit.own', 'com_merakiac')): ?>
                    <?php $canEdit = JFactory::getUser()->id == $item->created_by; ?>
                <?php endif; ?>

            <tr class="row<?php echo $i % 2; ?>">

                <?php if (isset($this->items[0]->state)) : ?>
                    <?php $class = ($canChange) ? 'active' : 'disabled'; ?>
                    <td class="center">
    <a class="btn btn-micro <?php echo $class; ?>" href="<?php echo ($canChange) ? JRoute::_('index.php?option=com_merakiac&task=session.publish&id=' . $item->id . '&state=' . (($item->state + 1) % 2), false, 2) : '#'; ?>">
    <?php if ($item->state == 1): ?>
        <i class="icon-publish"></i>
    <?php else: ?>
        <i class="icon-unpublish"></i>
    <?php endif; ?>
    </a>
</td>
                <?php endif; ?>

                                <td>

                    <?php echo $item->id; ?>
                </td>
                <td>

                    <?php echo $item->date; ?>
                </td>
                <td>
                <?php if (isset($item->checked_out) && $item->checked_out) : ?>
                    <?php echo JHtml::_('jgrid.checkedout', $i, $item->uEditor, $item->checked_out_time, 'sessions.', $canCheckin); ?>
                <?php endif; ?>
                <a href="<?php echo JRoute::_('index.php?option=com_merakiac&view=session&id='.(int) $item->id); ?>">
                <?php echo $this->escape($item->time); ?></a>
                </td>
                <td>

                    <?php echo $item->title; ?>
                </td>
                <td>

                    <?php echo $item->teacher; ?>
                </td>
                <td>

                    <?php echo $item->lvl; ?>
                </td>
                <td>

                    <?php echo $item->notes; ?>
                </td>
                <td>

                    <?php echo $item->jr; ?>
                </td>
                <td>

                    <?php echo $item->cap; ?>
                </td>
                <td>

                    <?php echo $item->att; ?>
                </td>
                <td>

                    <?php echo $item->sid; ?>
                </td>


                                <?php if ($canEdit || $canDelete): ?>
                    <td class="center">
                        <?php if ($canEdit): ?>
                            <a href="<?php echo JRoute::_('index.php?option=com_merakiac&task=sessionform.edit&id=' . $item->id, false, 2); ?>" class="btn btn-mini" type="button"><i class="icon-edit" ></i></a>
                        <?php endif; ?>
                        <?php if ($canDelete): ?>
                            <a href="<?php echo JRoute::_('index.php?option=com_merakiac&task=sessionform.remove&id=' . $item->id, false, 2); ?>" class="btn btn-mini delete-button" type="button"><i class="icon-trash" ></i></a>
                        <?php endif; ?>
                    </td>
                <?php endif; ?>

            </tr>
        <?php endforeach; ?>
        </tbody>
    </table>

Any insight is appreciated. Thank you!



Related Questions


Joomla component include JavaScript, pop error

Updated April 21, 2015 05:04 AM


Show Form Field if AJAX-response is false

Updated April 22, 2016 08:04 AM

Save multiple fields in DB

Updated June 21, 2016 08:04 AM