Dynamic Table Row Class?

SimonTemplar · 04-02-2014 2:28pm #1

In web development, let's say I am generating a table from a db query results set and I want the row to be styled differently when the value of one field changes, e.g. in a list of transactions, I want a thinker bottom border to indicate the end of a date group like this mockup http://imageshack.com/a/img542/2761/6bz7.jpg .

When iterating through the resultset to generate the table HTML (using either PHP or JSTL), I'm thinking I could check if the date field of the current row does not equal the date field of the next row, and if so, use a different class, which would have a different styling.

Is this methodology correct?

ChRoMe · 04-02-2014 3:32pm

SimonTemplar wrote: »

In web development, let's say I am generating a table from a db query results set and I want the row to be styled differently when the value of one field changes, e.g. in a list of transactions, I want a thinker bottom border to indicate the end of a date group like this mockup http://imageshack.com/a/img542/2761/6bz7.jpg .

When iterating through the resultset to generate the table HTML (using either PHP or JSTL), I'm thinking I could check if the date field of the current row does not equal the date field of the next row, and if so, use a different class, which would have a different styling.

Is this methodology correct?

Seems reasonable.

cregganna · 04-02-2014 3:45pm

SimonTemplar wrote: »

Is this methodology correct?

Yes, but, your more likely to find yourself coding a style with a thicker top border when the current record does not match the previous record on the group key (s).

SimonTemplar · 04-02-2014 3:54pm

If I explicitly wanted to identify the last row of the group, how would I do it.

In PHP, if I use mysql_fetch_array, I understand that the pointer automatically moves to the next row after the current one is read. Can I iterate using an index? Is there another way to iterate through a resultset, perhaps using an iterating variable such as

if row(i) <> row(i+1)

(rough example)

tricky D · 04-02-2014 4:03pm

SimonTemplar wrote: »

If I explicitly wanted to identify the last row of the group, how would I do it.

In PHP, if I use mysql_fetch_array, I understand that the pointer automatically moves to the next row after the current one is read. Can I iterate using an index? Is there another way to iterate through a resultset, perhaps using an iterating variable such as

if row(i) <> row(i+1)

(rough example)

If I understand correctly, it might be worth having a look at the css3 pseudo classes :last-child or :last-of-type and maybe some other ones.

More: http://reference.sitepoint.com/css/css3psuedoclasses

SimonTemplar · 04-02-2014 4:09pm

tricky D wrote: »

If I understand correctly, it might be worth having a look at the css3 pseudo classes :last-child or :last-of-type and maybe some other ones.

More: http://reference.sitepoint.com/css/css3psuedoclasses

Thanks, but I'd perfer to use a normal class and put all the logic in the server side.

Talisman · 04-02-2014 5:13pm

If you are insisting on doing the styling on the server side as you are iterating through the database result then why not style the current row based upon the value you have from the previous row. You would select a style with a different border-top for the current row when the date changes.

SimonTemplar · 04-02-2014 5:18pm

Talisman wrote: »

If you are insisting on doing the styling on the server side as you are iterating through the database result then why not style the current row based upon the value you have from the previous row. You would select a style with a different border-top for the current row when the date changes.

yes, I could do that based on this example. But in general, I'm wondering what options are available to me when iterating through a result set in PHP.

Talisman · 04-02-2014 5:45pm

Best practice is to do all the styling on the presentation layer - preferably the client side, the server's CPU cycles should be considered precious and not be taken up with petty things like styling content when that's the purpose of the client's web browser.

If you want to style the content on the server then you might use a framework - MVC frameworks are quite popular.

The principles of good design practice is that the View/Template should be ignorant of the Model (data source). If the template needs to know what comes next before it can proceed then there is a problem with the design.

In your given scenario, the database result set could be passed as an array to the view. The view can iterate through the array, happily selecting the correct template for any given row by seeing what's in the next row without disturbing the database.

At a later date if you decide to swap out the database for another data source then you shouldn't have to rewrite the presentation layer's code.

SimonTemplar · 04-02-2014 6:00pm

Thanks Talisman but perhaps I'm not explaining myself clearly.

I know that the styling should be done on the client side via CSS. I'm fairly new to PHP but my understanding of how things work are as follows:

- The PHP file on the server side queries a db and returns a result set (fetch_array). The db is no longer used during this request.
- This array is used to dynamical generate a <TABLE> and its <TR> and <TD> by looping through the array and echoing the relevant tags and array values.
- The pointer of this array automatically moves to the next row when the current row is read.
- The server sends this generated HTML to the client browser which applies any CSS associated with HTML file for styling purposes.
- This CSS targets the HTML elements using selectors, such as classes and IDs

So, when the PHP generates the <TR> tags during the array iteration, I would want to echo <TR class="normal-row"> or <TR class="date-end-row"> depending if the row holds the last occurrence of a date or not. It is then up to the CSS on the client side to style based on the .date-end-row and .normal-row selectors, i.e. styling is still done on the client side and the PHP on the server side is simply adding the class to the <TR> tags.

So, assuming I want to identify the last occurrence of a date in a sorted table in PHP so I know what class to echo, how can that be done. In other languages, I would have an an iterator variable such as i and used i+1 to "look at" the next row.

Of course, please let me know if I'm incorrect in assuming that I can use PHP to echo elements' classes and IDs.

Talisman · 04-02-2014 6:39pm

PHP is no different to other languages for incrementing:

[PHP]<?php
$array = array(1, 2, 3, 4, 5);
$count = count($array);
echo "# of Rows: $count \n";
for ($i = 0; $i < $count; $i++) {
echo "Row ".($i+1).": \n";
echo "This value (Array[$i]): " . $array[$i] . "\n";
if (($i+1) < $count) {
echo "Next value (Array[".($i+1)."]): " . $array[$i+1] . "\n";
}
}
?>[/PHP]

Output:

# of Rows: 5 
Row 1: 
This value (Array[0]): 1
Next value (Array[1]): 2
Row 2: 
This value (Array[1]): 2
Next value (Array[2]): 3
Row 3: 
This value (Array[2]): 3
Next value (Array[3]): 4
Row 4: 
This value (Array[3]): 4
Next value (Array[4]): 5
Row 5: 
This value (Array[4]): 5

amen · 05-02-2014 2:16pm

when you are creating the data on the db simply include an extra column that tells the php to switch classes

oscarBravo · 05-02-2014 3:32pm

amen wrote: »

when you are creating the data on the db simply include an extra column that tells the php to switch classes

Presentation logic in the database layer? :eek:

ChRoMe · 06-02-2014 9:41am

oscarBravo wrote: »

Presentation logic in the database layer? :eek:

That was thedailywtf worthy...........

Creamy Goodness · 06-02-2014 10:13am

ChRoMe wrote: »

That was thedailywtf worthy...........

I fail to see the problem. Mb's are cheap as chips these days :pac:

amen · 06-02-2014 1:52pm

Presentation logic in the database layer

not at all.

indicate the end of a date group

so the Dataset already knows there is a data group ending so why not detect it and use that to change the style sheet.

ChRoMe · 06-02-2014 2:05pm

amen wrote: »

not at all.

so the Dataset already knows there is a data group ending so why not detect it and use that to change the style sheet.

Er, yes it is presentation related data being persisted in the db.

amen · 07-02-2014 1:54pm

Er, yes it is presentation related data being persisted in the db.

I know what you are saying but at the end of the day it is an indicator to do something just as any other piece of data is.

Its not storing styles, colours etc. You can write complicated client/server side logic to inspect the data and look at prior/preceding rows and try to figure out what style to use or you pass a value down such as G (for group row) and switch the style on that.

ChRoMe · 07-02-2014 2:01pm

amen wrote: »

I know what you are saying but at the end of the day it is an indicator to do something just as any other piece of data is.

Its data that is *specifically* related to presentation which has no business in the database. Its extremely bad practice.

Here is a decent rule of thumb, if that database was being consumed by something else other than that front end, should it be there?

cregganna · 07-02-2014 2:30pm

Agree with chrome. Storing "end of group" in your dB would be an over complication/optimisation. Supposing you added a row that was a new end of group or deleted a row that was an end of group. There madness and indecipherable SQL lies.

Either construct the SQL query to order and group by with a group function or select with order and use code to spot group transition. The code can be server or client side.

I still maintain you should do something different at beginning of group rather than end but that's just me. (Save previous group key value and compare)

Other ways of iterating: (from memory and I may be a bit out of date)

foreach ($array as $element) {}
while (list($col1, $col2, $col3) = mysql_fetch_row($resultSet)) {}

oscarBravo · 07-02-2014 2:48pm

The idea that a database row should have a "value changed" flag in it is ridiculous. Changed with respect to what, exactly? What if you're sorting in reverse order? By a different column? What if you can select which rows are included in the output, and the date changes at a different point in the resultset?

The only place it's meaningful to say that the date has changed is in the presentation layer, where it means "the value of this column in this row (of the display table, not the database table) is different from the value of the same column in the previous row".

SimonTemplar · 07-02-2014 4:55pm

cregganna wrote: »

I still maintain you should do something different at beginning of group rather than end but that's just me. (Save previous group key value and compare)

What would you do if you did want to apply different styling to the end of a group, such as shading or font styling?

I do agree that storing any kind of presentation logic in the db is not an option.

oscarBravo · 07-02-2014 7:58pm

SimonTemplar wrote: »

What would you do if you did want to apply different styling to the end of a group, such as shading or font styling?

It's trickier. You basically need to delay writing each display row until you've read the next database row. Once you've read the next database row and determined whether the date has changed (or if there isn't a next database row, which has the same effect), you can output the display row corresponding to the previous database row.

Like I said, trickier. But doable.

Dynamic Table Row Class?

Comments