Dynamic content in 2 columns (rather than one!)

StackOverflow https://stackoverflow.com/questions/1956195

Question

I have one table which display data as from Dynamic Content in 1 column. I would like the content to move to a second column when the number of cell is >3. (ie. if there are 3 cells to display, it would be display in 1 col, and 4 cells or more it would be displayed in 2 columns. Note that the dynamic content will never go over 6 cells.

I have to say I can find my way with css and html but javascript is another issue... however I do realize it might be the only way.

Any Javascript , jQuery script available to get my result?

Data to be displayed like so:

| Col1  |          | Col1  || Col2  |
---------          -----------------
| Data1 |   ---->  | Data1 || Data4 |
| Data2 |          | Data2 | etc...
| Data3 |          | Data3 |

Not sure if this would help but the Code calling for the dynamic content (and putting it in the table) is:

<table id="myTable">
                  <?php
     $str1="";
     $flag1=1;
     while($rowReview1=mysql_fetch_array($resultReview1)){
      $st1="";
      $val=$rowReview1["ratingValue"];
      $sName=$rowReview1["criteriaName"];

      if($val>0){

       for($ii=1;$ii<=$val;$ii++){
        $st1.="<img src=\"$directory/images/orange.gif\" \>";
       }

       for($jj=$val;$jj<5;$jj++){
        $st1.="<img src=\"$directory/images/gray.gif\" \>";
       }
      }else{
       $st1="";
      }

      if($val > 0){
       $str1.="<tr><td>$sName</td><td>$st1</td></tr>";
      }else{
       $str1.="<tr><td>$sName</td><td>N/A</td></tr>";
      }
     }
     echo $str1;
    ?>
                </table>

The page can now be seen live here: http://www.top10banques.com/avis/index2.php?item_id=1 The tables I'm trying to edit are the ones below the page break "l'evaluation des clients".

Thanks again for any help you could provide and Happy Holidays to all!

Was it helpful?

Solution

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">
   </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...

OTHER TIPS

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.

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";
   }

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 $! :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top