CODEWITHSUNDEEP
phpmysqlhtmlcss
user1347219
user1347219

Reputation: 291

show all data from a table

Currently after doing a query to mysql all data is shown in a HTML table ex:

membership-number | name | surname | address | age | nationality | id | card | profession..

Problem is that all content is squeezed up and not showing nice in the HTML table.

I would like to have maybe just the membership-number, name and surname showing and once you click on the membership-number all the data is then shown neatly.

Not sure what I need to use if it is JavaScript or not but would apprciate if you can at least give me a clue on how to be able to show all the data in a neat way.

Thanks

Upvotes: 1

Views: 780

Answers (4)

Laura Huysamen
Laura Huysamen

Reputation: 398

If I understand you correctly, you want an HTML table that displays the membership-number, name and surname of each member. When you click on the membership-number, you want it to display the rest of the detail. I think Surreal Dreams is right about using Javascript to do that part.

It could look something like this (please excuse pseudocode - can't remember foreach syntax): 

echo "<table id='data'>";
foreach ($row in $sqltable)
{
  echo "<tr>";
  echo "<td><a onclick='displaymoreinfo'>".$row['id']."</a></td>";
  echo "<td>".$row['name']."</td>";
  echo "<td>".$row['surname']."</td>";
  echo "</tr>";    
} 
echo "</table>";

Then, you'd need a javascript method at the top of the file that did something like what this person has here: http://viralpatel.net/blogs/2009/03/dynamically-add-remove-rows-in-html-table-using-javascript.html

-Laura

Upvotes: 1

Stefan
Stefan

Reputation: 3900

One option is to use jQuery and datatables.

Used together with your normal HTML, your tables are instantly transformed into sortable, paginated, styled etc. tables. You can of course choose the settings you want to apply.

You can also write your own PHP table class or script which together with CSS renders the data depending on your inputs. You can then specify these parameters using PHP arrays, something like this maybe:

PHP:

Let's say your SQL query script eventually returns the table data as something like this:

$tbl_data = array(
   0 => array("nr" => "10", "name" => "John", "surname" => "Smith", "address" => " Plaza Hotel Room 12", "age" => "44", "nat" => "Syldavian", "id" => "12345", "card" => "MasterCard", "prof" => "Pet Washer"),
   1 => array("nr" => "11", "name" => "Captain", "surname" => "Haddock", "address" => "Marlinspike Hall", "age" => "55", "nat" => "British", "id" => "133455", "card" => "Discovery", "prof" => "Captain")

);

Then you can maybe specify your input parameters like this:

$arr_cols = array("nr" => "Membership Number", "name" => "Name", "surname" => "Surname", "address" => "Address", "age" => "Age", "nat" => "Nationality", "id" => "ID", "card" => "Card", "prof" => "Profession");

$arr_align = array("nr" => "center", "name" => "left", "surname" => "left", "address" => "left", "age" => "center", "nat" => "center", "id" => "center", "card" => "left", "prof" => "left");

$lst_show = array("nr", "name", "surname");

This table view method can then always be used, independent of your specific inputs:

$html = "<table class='grid'>\n";
// headings
foreach ($arr_cols as $key => $title) {
    if (in_array($key, $lst_show))
        $html .= "<tr><th>$title</th></tr>\n";
} 
//rows
foreach ($tbl_data as $arr_row) {
   foreach ($arr_row as $key => $data) {
     if (in_array($key, $lst_show)) {
        $align = !empty($arr_align[$key]) ? " align='" . $arr_align[$key] . "'" : '';
        $html .= "<tr><td$align>$data</td></tr>\n";
    }
  }
}
$html .= "</table>\n";

echo $html;

CSS:

table.grid {border:1px solid blue; etc.}
table.grid th {etc.}
table.grid td {etc.}

Upvotes: 1

Anthony
Anthony

Reputation: 37065

I'm a big fan of definition lists for such a task, but you could combine that with a table for the same effect. Here's a demo:

http://jsfiddle.net/crazytonyi/rZfKg/

Upvotes: 1

Surreal Dreams
Surreal Dreams

Reputation: 26380

The short answer is that if you want to output your data and then change the displayed info based on user interaction, you will need JavaScript. Specifically, I suggest jQuery for this kind of thing. You'll still need to work out a nice neat way to display your data with HTML and CSS, and then have JavaScript/jQuery reveal the nice presentation.

However, presenting "neatly" is pretty subjective - you'll have to decide what you want to display and how to lay it out, and that will be all CSS and HTML. I will tell you right off the bat, avoid tables - go for good clean semantic HTML.

Upvotes: 0

Related Questions