ansaurus

Question

Dynamic content in 2 columns (rather than one!)

Answer 1

+1 A:

Assuming you're using standard table structure, first I would put all your data into one column, regardless of how many there are. Then I would move them dynamically:

EDIT Here's a working sample of what you're trying to do. The problem was you have TWO div cells per row, I thought you only had one:

<html>
<head>
   <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;
   </script>
</head>
<body>
    <script type="text/javascript">
      $(function(){
 var allRows = $('#myTable tr');
if(allRows.length > 3) {
   var extraData = $('#myTable tr:gt(2) td')
   var j = 0;       
   for (i=0;i<extraData.length/2;i++) { 
       $(allRows[i]).append(extraData[j])
       $(allRows[i]).append(extraData[j+1])
       j=j+2;
   }
   $('#myTable tr:gt(2)').remove();
}
});
</script>

<table id="myTable">
<tr><td>Data1</td><td>Data11</td></tr>
<tr><td>Data2</td><td>Data21</td></tr>
<tr><td>Data3</td><td>Data31</td></tr>
<tr><td>Data4</td><td>Data41</td></tr>
<tr><td>Data5</td><td>Data51</td></tr>
<tr><td>Data6</td><td>Data61</td></tr>
</table>

</body>
</html>

NOTE the above solution will only work to your exact specifications. If you want this to be reusable (ie, takes any number of rows with any number of cells), you may have to do some additional tweaking.

WORKING UPDATE FOR MULTIPLE TABLES

See the code I posted here on Pastie: http://pastie.org/755963

Note that the tables are now referenced by classes instead of ids. Also, I want to say that I agree that this solution could (and maybe should) be handled server side, I am merely answering the question as the OP asked...

Jason 2009-12-24 01:26:59

Oh... Sorry for the bad proofreading and the lack of clarification.I'm looking into something like your first example (Col1 if <4 cells to display; Col1 and Col2 for >3 cells).Thanks for helping Jason! ;-)

Tioneb 2009-12-24 01:39:13

FWIW the code rendering in the question and the answer looks exactly the same to me...

emddudley 2009-12-24 01:49:02

@emddudley - that's because i put it there after he answered, and then i went to add my answer :)

Jason 2009-12-24 01:51:29

Hmm I tried that and it didn't work... I revised my question to attach the code calling for the dynamic content and putting it in the table. Thanks again for your help.

Tioneb 2009-12-24 02:24:36

Thank you so much Jason... I tried to figure it out by myself and lost 5 hours trying to find a solution... Yours work perfectly for my need. I really appreciate the time you took to guide me through this (and sorry again for not being super clear from the start). Merry Christmas by the way!

Tioneb 2009-12-24 07:44:20

my pleasure :) happy holidays!

Jason 2009-12-24 11:37:20

argh... I spoke too fast (or I was asleep last night and really wanted it to work...). Your script worked fine... with the first table, but it doesn't display the tables below (i guess it was obvious it wasn't going to... :/) Anyhow, back to square 1 for me.I uploaded my page so that people can have a look at it (see question above)...

Tioneb 2009-12-24 18:18:16

nonono... not back to square one... just modify your script a bit! you never mentioned that you had more than one table. if you do and you want this script to apply to them, you just apply a class to your tables and run an "each" method. see my upcoming update...

Jason 2009-12-24 21:37:15

Man... you just made my day! It works (you can see it working on the link posted above...). The class thing didn't even cross my mind!Anyway, very impressed with my first post on stackoverflow, hopefully I'll be able to provide some help as well at some point!Thanks again Jason and everyone else that provided feedback!

Tioneb 2009-12-24 23:40:36

glad to have you here, and glad i could help! :)

Jason 2009-12-25 00:24:13

Answer 2

A:

I would probably build a JSON object with this data in the PHP instead of injecting it into the DOM at ALL at first. This way, you don't have the overhead of the javascript restructuring existing data in the DOM, its just positioning it from scratch.

slant 2009-12-24 04:59:11

Answer 3

A:

I would have thought this would be straightforward using CSS (but I'm no CSS expert).

Something like this deals with a more generic case in PHP:

   function multi_columns($inp_array)
   {
 $max_cols=4;
 $target_rows=3;

 if (count($dyn)>$max_cols*$target_rows) {
   // won't fit in this number of cols/rows
   // add more rows
   $rows=count($dyn)/$max_cols;
   $target_rows= ($rows==(integer)$rows) ? $rows : $rows+1;
 } elseif (count($dyn)>$max_cols*$target_rows) {
   // reduce to number of cols needed
   $cols=count($dyn)/$target_rows;
   $max_cols= ($cols==(integer)$cols) ? $cols : $max_cols;
 }

 print "<table>\n";
 for ($y=1; $y<=$target_rows; $y++) {
    print "<tr>\n";
    for ($x=1; $x<=$max_cols; $x++) {
         print "<td>";
         if (array_key_exists($y+$x*$target_rows, $inp_array)) {
      print $inp_array[$y+$x*$target_rows];
   }
   print "</td>";
    }
    print "</tr>\n";
 }
 print "</table>\n";
   }

symcbean 2009-12-24 11:09:30

Hi Symcbean, I like that solution even better, but I can't get it to work properly with my tables... And I might be wrong but I don't think I can do that with css...

Tioneb 2009-12-24 18:14:48

code is a bit buggy - try replacing the references to $dyn with $inp_array, and use 0 for the start point in the $x and $y loops.C.

symcbean 2009-12-28 01:16:36

Answer 4

A:

This problem begs to be solved at the server and improve page performance by eliminating a JavaScript script.

Secondly, you can simplify life by not using a table, but rather div's.

Let us have a look first at a proposed data structure. We will hold all output in an array since you are using PHP.

$data=array[0...n];

That simply sorts the business logic generation.

Now let us look at the presentational logic, first visually the proposed divs!

$data_length=m

    j=0   j=1   j=2   j=3   .....   j= x

i=0 [1]    [4]    [7]    [10]       []

i=1 [2]    [5]    [8]    [11]       []

i=2 [3]    [6]    [9]    [12]       []

 y   []     []    []     []         []

All divs will be floated left. A clearing div will be printed once the row is completed.

Now we need to define the relationships of our data versus the position. A bit of observation of the table, shows that all horizontal positional values are separated by 3 and all vertical by one (i.e we need to iterate over our array $data in steps of three!), effectively floating our divs as follows:

j=0   j=1   j=2   j=3   .....   j= x

i=0 [1]    [4]    [7]    [10]   []

Pseudo algorithm

 $imax=2;                     // spec
 $number_cells = m/imax       // total number of cells
 $jmax=$number_cells/3        // check rounding etc left out at this stage
                              // you can use mod % to see if there are 
                              // remainders etc.. on second script iteration

And now for the iteration

 for ($i=0;$i<$imax-1;$i++){
     for ($j=0;$j<$jmax;$j++){
        $out.=wrap_in_div($data[($j*3)+(i+1)]);
     }
 }

Note that I have not bothered to define lay out the function wrap_in_div as is trivial.

Hope it helps Merry Christmas! Program was off my head so please translate the pseudo-code into real $! :)

yannis 2009-12-24 19:23:15

actually, it should NOT be divs because it is tabular data... tables are powerful for what they're intended to do, which is display tabular data.

Jason 2009-12-24 21:47:39

No one doubts that tables are powerful for data, I used divs because it was easier to show the algo and suggest ways to separate the presentation from the logic

yannis 2009-12-25 13:19:47

ansaurus

tags:

views:

answers:

Dynamic content in 2 columns (rather than one!)

related questions