Formating Table To Display Data In A Chessboard-Like Pattern

josephbupe · November 28, 2012

Hi,

I am wondering how I can create a table to display data from MySQL database in a pattern like a chess board, instead of continuous data-grid.

I intend to display images this way.

I will appreciate your help.

Joseph Bupe

haku · November 28, 2012

You mean using knights and rooks?

codefossa · November 28, 2012

You would be better off with DIV's than a table. A parent div containing the smaller ones floated. As you create them you can do whatever you'd like with them and you can make the pattern you're trying for.

Also, if you're creating a JS chess/checkers game, this would easily make the elements draggable and find their dropped location if all of the DIV's are the same size.

codefossa · November 28, 2012

Here's an example of what I was talking about, using jQuery.

Demo: http://xaotique.no-ip.org/tmp/22/

Javascript / jQuery

$(document).ready(function()
{
   var tileSize  = 100;
   var gridSize  = [ 8, 8 ];
   var gridColor = [ "#EFEFEF", "#000000" ];
   var container = $("body:first");

   var board = $(document.createElement("div")).css(
   {
       width: gridSize[0] * tileSize,
       height: gridSize[1] * tileSize,
       margin: "0px auto",
       border: "2px solid black"
   });

   container.append(board);

   for (var i = 0, tiles = gridSize[0] * gridSize[1]; i < tiles; i++)
   {
       var bgcolor = i % 2 == 0 ? gridColor[1] : gridColor[0];

       if (Math.floor(i / gridSize[0]) % 2 == 0)
           bgcolor = bgcolor == gridColor[0] ? gridColor[1] : gridColor[0];

       var tile = $(document.createElement("div")).css(
       {
           float: "left",
           width: tileSize,
           height: tileSize,
           "background-color": bgcolor
       });

       board.append(tile);
   }
});

josephbupe · November 29, 2012

Hi Xaotique,

Thank you so much for your suggestions. However, I do not understand jQuery and I was hoping for something simple like what Suraj at http://www.weberdev.com/get_example.php3?ExampleID=4406 has demostrated in the details page "showreprt1.php".

I tried it but only getting a single record listed in the table of results even when I have more than one records meeting the criteria.

What could I be missing to show results in columns than rows?

Here is my code:

<?php ini_set( 'error_reporting', E_ALL ^ E_NOTICE );?>
<?php ini_set( 'display_errors', '0' );?>
<?
include("includes/conn.php");
$mtitle=$_POST["mtitle"];
$myear=$_POST["myear"];
$mcountry=$_POST["mcountry"];
$mactors=$_POST["mactors"];
$o=$_POST["o"];
 $rest="";
 $text="Search Keywords : ";

  if($mtitle!="")
  {
   if($rest=="")
   {
  $rest.="where mtitle='$mtitle' ";
  $text.="Movie Title = $mtitle";
   }
   else
   {
   $rest.=" $o mtitle='$mtitle' ";
   $text.=", Movie Title = $mtitle";
   }
  }

   if($myear!="")
  {
   if($rest=="")
   {
  $rest.="where myear = '$myear' ";
  $text.="Year = $myear ";
   }
   else
   {
  $rest.=" $o  myear = '$myear' ";
  $text.=", Year = $myear ";
   }
  }

  if($mcountry!="")
  {
   if($rest=="")
   {
   $rest.="where mcountry = '$mcountry' ";
   $text.="Country = $mcountry";
   }
   else
   {
   $rest.=" $o  mcountry = '$mcountry' ";
   $text.=", Country = $mcountry";
   }
  }
  if($mactors!="")
  {
   if($rest=="")
   {
   $rest.="where mactors = '$mactors' ";
   $text.="Actor = $mactors";
   }
   else
   {
   $rest.=" $o  mactors = '$mactors' ";
   $text.=", Actor = $mactors";
   }
  }

 if($rest!="")
 {
 $rest=$rest;
 }
 else
 {
  //die("Enter Search Parameter<br><br><br><br><br><br><br><br><br><br><br>");
 }
$sql="select * from $db_name $rest order by mtitle";
$result=mysql_query($sql) or die(mysql_error());  
$num=mysql_num_rows($result);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Wlink Employee Details</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="../../style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../script.js"> </script>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>
<body>
<table width="775" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

 <tr>
   <td><hr size="1" noshade></td>
 </tr>
 <tr>
   <td>
  <table width="750" border="0" align="center" cellpadding="2" cellspacing="2">
    <tr>
	  <td align="left">
<?
echo "<div align=right>$text</div>";
echo "<table width=700 border=0 cellpadding=0 cellspacing=0 align=center>\n
<tr>\n
<td> Total No of Records Found: $num   \n
<td>  \n

</tr>\n
<tr> \n";
$counter=0;
while($row=mysql_fetch_array($result))
{
$sn=$row['m_id'];
$mtitle=$row['mtitle'];
$myear=$row['myear'];
$mgenres=$row['mgenres'];
$mactors=$row['mactors'];
$mcountry=$row['mcountry'];
$mfilename=$row['mfilename'];
}

if($counter>=0) {
echo "<td valign=top>\n
<table width=340 border=1 align=left class=allborder> \n
<tr> \n
	 <td width=120> Title:  <td>$mtitle\n
</tr>\n
 <tr> \n
 <td> Year:  <td> $myear\n
</tr>\n
 <tr> \n
 <td> Genres:  <td> $mgenres\n
</tr>\n
 <tr> \n
 <td> Actors:  <td> $mactors\n
</tr>\n
</tr>\n
 <tr> \n
 <td> Country:  <td> $mcountry\n
</tr>\n
 <tr> \n
 <td> Poster:  <td><img src=\"./images/{$row['mfilename']}\" width=\"90\" height=\"120\" alt=\"\" /> \n
 </td>
</tr>\n
 <tr> \n
 <td colspan=2 class=topBorder> <a href=viewdetail.php?sn=$sn>View Detail Info</a>\n
</tr>\n
</table>\n</td>\n
 ";
 $counter++;
 }
 if($counter==2) {
  echo "</tr>\n<tr>\n<td colspn=2>  \n</tr>\n<tr>\n";
 $counter=0;
 }

echo "</table>\n";
?></td>
    </tr>
   </table></td>
 </tr>
</table>
</body>
</html>

josephbupe · November 30, 2012

Hi,

I am glad to report that I was able to fix the problem and achieve what I wanted.

However, I have another problem with how to count the content and create a paginating. The code I am trying to adopt counts queries arranged in rows but seems not to count the content in my query, which is chessboard-like pattern.

Please, see my complete code:

<?php ini_set( 'error_reporting', E_ALL ^ E_NOTICE );?>
<?php ini_set( 'display_errors', '0' );?>
<?
@ $rpp;  //Records Per Page
@ $cps;  //Current Page Starting row number
@ $lps;  //Last Page Starting row number
@ $a;  //will be used to print the starting row number that is shown in the page
@ $b;   //will be used to print the ending row number that is shown in the page
?>
<?
include("includes/conn.php");
$mtitle=$_POST["mtitle"];
$myear=$_POST["myear"];
$mcountry=$_POST["mcountry"];
$mactors=$_POST["mactors"];
$o=$_POST["o"];
 $rest="";
 $text="Search Keywords : ";

  if($mtitle!="")
  {
   if($rest=="")
   {
    $rest.="where mtitle='$mtitle' ";
    $text.="Movie Title = $mtitle";
   }
   else
   {
   $rest.=" $o mtitle='$mtitle' ";
   $text.=", Movie Title = $mtitle";
   }
  }

   if($myear!="")
  {
   if($rest=="")
   {
    $rest.="where myear = '$myear' ";
    $text.="Year = $myear ";
   }
   else
   {
   $rest.=" $o  myear = '$myear' ";
   $text.=", Year = $myear ";
   }
  }

  if($mcountry!="")
  {
   if($rest=="")
   {
    $rest.="where mcountry = '$mcountry' ";
    $text.="Country = $mcountry";
   }
   else
   {
   $rest.=" $o  mcountry = '$mcountry' ";
   $text.=", Country = $mcountry";
   }
  }
  if($mactors!="")
  {
   if($rest=="")
   {
    $rest.="where mactors = '$mactors' ";
    $text.="Actor = $mactors";
   }
   else
   {
   $rest.=" $o  mactors = '$mactors' ";
   $text.=", Actor = $mactors";
   }
  }

 if($rest!="")
 {
 $rest=$rest;
 }
 else
 {
  //die("Enter Search Parameter<br><br><br><br><br><br><br><br><br><br><br>");
 }
$sql="select * from $db_name $rest order by mtitle";
$result=mysql_query($sql) or die(mysql_error());  
$num=mysql_num_rows($result);
/////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
//Following IF Statement is used to make sure when the page is loaded for the
//first time, Current Page's Starting row number is 0, i.e. 1st row from the
//table is being printed. It will change as the user will click on next.
/////////////////////////////////////////////////////////////////////////////////
if(empty($_GET["cps"]))
{
 $cps = "0";
}
else
{
 $cps = $_GET["cps"];
}
/////////////////////////////////////////////////////////////////////////////////
$a = $cps+1;
$rpp = "10";
$lps = $cps - $rpp; //Calculating the starting row number for previous page
/////////////////////////////////////////////////////////////////////////////////
//Following IF Statement is used to make sure whether a link to Previous page is
//needed or not. If the user is viewing the first set of data then the link will
//be disabled, if on the next set then it will carry the $lps in its link and
//enable the link
if ($cps <> 0)
{
 $prv =  "<a href='paging.php?cps=$lps'>Previous</a>";
}
else
{
 $prv =  "<font color='cccccc'>Previous</font>";
}
/////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
//Following SQL Statement uses SQL_CALC_FOUND_ROWS function to calculate total
//number of rows found by the query excluding the limit function added at the
//end of the SQL statement. This is followed by second query with FOUND_ROWS()
//function which actually gives out the number of rows found.
/////////////////////////////////////////////////////////////////////////////////
$q="Select SQL_CALC_FOUND_ROWS * from paging limit $cps, $rpp";
$rs=mysql_query($q) or die(mysql_error());
$nr = mysql_num_rows($rs); //Number of rows found with LIMIT in action
$q0="Select FOUND_ROWS()";
$rs0=mysql_query($q0) or die(mysql_error());
$row0=mysql_fetch_array($rs0);
$nr0 = $row0["FOUND_ROWS()"]; //Number of rows found without LIMIT in action
/////////////////////////////////////////////////////////////////////////////////
//Following IF Statement is used to determine whether the user has reached the
//last page of the records. For example, if we have 27 rows to print and we show
//10 rows per page, then on the third and the last page it will show seven rows
//and will say at the top that SHOWING RECORDS FROM 21 to 27. If the following
//validator is not used then it shows SHOWING RECORDS FROM 21 to 30.
/////////////////////////////////////////////////////////////////////////////////
if (($nr0 < 10) || ($nr < 10))
{
 $b = $nr0;
}
else
{
 $b = ($cps) + $rpp;
}
/////////////////////////////////////////////////////////////////////////////////
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Wlink Employee Details</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="../../style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../script.js"> </script>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>
<body>
<table width="800" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
 <tr>
   <td>
  <table width="750" border="0" align="left" cellpadding="2" cellspacing="2">
    <tr>
	  <td align="left">
<?
echo "<div align=right>$text</div>";
echo "<table width=700 border=0 cellpadding=0 cellspacing=0 align=left>\n
<tr>\n
<td> Total No of Records Found: $num   \n
<td>  \n

</tr>\n
<tr> \n";
$counter=0;
while($row=mysql_fetch_array($result))
{
$sn=$row['m_id'];
$mtitle=$row['mtitle'];
$mfilename=$row['mfilename'];

if($counter>=0) {
echo "<td valign=top>\n
<table width=150 border=1 align=left class=allborder> \n
<tr> \n
 <td width=70>$mtitle\n
</tr>\n
 <tr> \n
 <td><img src=\"./images/{$row['mfilename']}\" width=\"90\" height=\"120\" alt=\"\" /> \n
 </td>
</tr>\n
 <tr> \n
 <td colspan=2 class=topBorder> <a href=viewdetail.php?sn=$sn>View Detail Info</a>\n
</tr>\n
</table>\n</td>\n
 ";
 $counter++;
 }
 if($counter==5) {
  echo "</tr>\n<tr>\n<td colspn=2>  \n</tr>\n<tr>\n";
 $counter=0;
 }
} 
echo "</table>\n";
?></td>
    </tr>
 <tr><td>
 <?
  {
 /////////////////////////////////////////////////////////////////////////////////
 //This is used to show the serial number on the page as well as to count it up
 //so that we can get the next page's starting row number when it exits the while
 //loop after fullfilling the above SQL criteria.
 /////////////////////////////////////////////////////////////////////////////////
 $cps = $cps +1;
 $val=$row["mfilename"];
 echo "<tr><td align='center'><font face=verdana>$cps</font></td><td align='center'><font fave=verdana>$val</font></td></tr>"; 
}

echo "<tr><td align='right' colspan=2>$prv";

/////////////////////////////////////////////////////////////////////////////////
//Following IF Statement is used to determine whether the Next link will be
//enabled or disabled. If the user has reached the last page of the record, then
//the Next link will be disabled.
/////////////////////////////////////////////////////////////////////////////////
if ($cps == $nr0)
{ 
 echo "  |  <font color='CCCCCC'>Next</font>";
}
else
{
 if ($nr0 > 5)
 {
  echo "  |  <a href='select.php?cps=$cps&lps=$lps'>Next</a>";
 }
}
/////////////////////////////////////////////////////////////////////////////////
?>
</td></tr>
   </table></td>
 </tr>
</table>
</body>
</html>

Any thoughts will be appreciated.

Regards.

Joseph

josephbupe · December 1, 2012

Resolved.

Thanx.

Joseph

Sign In

Formating Table To Display Data In A Chessboard-Like Pattern

Recommended Posts

josephbupe

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

codefossa

Link to comment

Share on other sites

codefossa

Link to comment

Share on other sites

josephbupe

Link to comment

Share on other sites

josephbupe

Link to comment

Share on other sites

josephbupe

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information