Jump to content


Photo

Formating Table To Display Data In A Chessboard-Like Pattern


  • Please log in to reply
6 replies to this topic

#1 josephbupe

josephbupe

    Advanced Member

  • Members
  • PipPipPip
  • 35 posts
  • LocationLusaka, Zambia

Posted 28 November 2012 - 03:10 AM

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

#2 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,177 posts

Posted 28 November 2012 - 07:11 AM

You mean using knights and rooks?

#3 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 558 posts
  • LocationPennsylvania, United States
  • Age:21

Posted 28 November 2012 - 12:29 PM

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.

#4 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 558 posts
  • LocationPennsylvania, United States
  • Age:21

Posted 28 November 2012 - 12:49 PM

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


#5 josephbupe

josephbupe

    Advanced Member

  • Members
  • PipPipPip
  • 35 posts
  • LocationLusaka, Zambia

Posted 29 November 2012 - 06:31 AM

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....?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 &nbsp; \n
<td> &nbsp;\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>&nbsp; \n</tr>\n<tr>\n";
  $counter=0;
  }
 
echo "</table>\n";
?></td>
	    </tr>
    </table></td>
  </tr>
</table>
</body>
</html>


#6 josephbupe

josephbupe

    Advanced Member

  • Members
  • PipPipPip
  • 35 posts
  • LocationLusaka, Zambia

Posted 30 November 2012 - 12:28 AM

Hi,

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

Posted Image

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 &nbsp; \n
<td> &nbsp;\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>&nbsp; \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

#7 josephbupe

josephbupe

    Advanced Member

  • Members
  • PipPipPip
  • 35 posts
  • LocationLusaka, Zambia

Posted 01 December 2012 - 01:27 AM

Resolved.

Thanx.

Joseph




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com