Categories > Your tips & tricks >

Easy way to serialize (data across by columns, then down by rows)

The forum is closed. Please use Stack Overflow for submitting new questions. Use tags: tinybutstrong , opentbs
By: James
Date: 2009-02-27
Time: 07:16

Easy way to serialize (data across by columns, then down by rows)

Started using TBS about a month ago and absolutely love it. The documentation can be a bit challenging sometimes -- could use more detailed examples -- but find that you can eventually figure it all out. Have some useful things I've figured out that I thought I'd share in case it saves anyone else some pain.

First up, I was trying to get data to go across the page, then down -- pretty much what serialize does. But to do that you have to create a main block and then the sub serial blocks and repeat them for each column (as far as I could tell). Here's a simpler way to achive it -- you can see what I used it for (a magazine online voting contest)at www.ontaponline.com/pages/hottest.php.

First I set up a standard template with a table that controls the page layout (in this case a two column page). Then, in the first column, I set up another table. This one is for displaying my result. It's a simple <table><tr><td> my content goes here </td></tr></table> set up.

Next, I set up the TBS block, using table as the parameter -- ie: in that table cell, you put <td>[block.somefield;block=table;] ... rest of your content </td>

Third, I used a couple of operations on the record number to assign a css class to the table, like this: <table class='[block.#;if [block.#;ope=add-1,mod:5]='0';then new row; else currow;]'><tr><td> ...

What that does is takes the result number, subtracts one from it (ope=add-1), then divides that by 5 (mod:5) and looks to see if there is a remainder or not (that's what modulus does, looks to see if a number divides evenly). If there is a remainder -- ie: result #7 would be 7-1 = 6. 6/5 = 1.2 so the remainder is 2) then the table style is currow -- my style that means current row. If there is no remainder, which will happen every sixth record (6-1 = 5. 5/5 = 1, etc.) then the table style is newrow.

Finally, it's just a matter of assigning the appropriate styles to your tables and giving them a float: left. That is what gets you the results going horizontally across the page. In the style newrow, you just assign the clear tag, clear:left -- that means that this table should go to the bottom of anything that preceeded it, then get floated left -- ie: the start of a new row.

Beyond that it's just a matter of things like assigning a left border to the newrow style and right border to the currow style. One other trick: The very first record should have newrow style -- it's the start of a row. But it won't based on the formula above -- 1/anything other than 1 will have a remainder. To get around that, I added a second "if" clause to my table class formula, like so: <table class='[block.#;if [block.#;ope=add-1,mod:5]='0';then new row;if [block.#] = '1';then newrow; else currow;]'><tr><td>... That just tells it that if it's the first result, it should also get new row style.

Hope that helps someone else figure this out. The benefit to it is that you only have to set up your results table once and if you decide to change the number of columns on your page, just change the number you're dividing by. So if you want three rows across, change it to [block.#;ope=add-1;mod:3]='0'; ... and so on.

Cheers. Feel free to contact me if this seems like something useful and you have questions.

James
By: Skrol29
Date: 2009-03-06
Time: 16:27

Re: Easy way to serialize (data across by columns, then down by rows)

Hi,

I've move this post to the Tips & Tricks forum.
By: RwD
Date: 2009-06-18
Time: 08:44

Re: Easy way to serialize (data across by columns, then down by rows)

I do not understand what the code is supposed to do at all. Also, if you use tables with a single row and a single cell then you are using them wrong and might just as well use a <div> element which does the same thing with less typing: <div>content goes here</div>.

But can you give a cear example of what your trick does?