CODEWITHSUNDEEP
phpjavascriptjquerymysql
4world2c
4world2c

Reputation: 31

I need to echo more columns from my Mysql

So far - and with great support from SO members, I am at the edge of finishing my Music Database program, along with all its complexities... As previously suggested, I am using Mysql, Php, JQuery and DataTable plugin, which gives great paginated results. All my Search results work as intended.

My database holds 15 columns of data. I have one table (OK for my current needs). I am able to currently POST and ECHO 12 columns of Search results within a 900px table.

To finalize my project, I also need to be able to show 3 more columns of - data which holds longer text (song description (150 Char), Producer Name(80 Char), and Publisher Name (80 Char), which obviously will not fit on this size table, even with wrapping - on the same row echo.

BUT how do I POST the last 3 columns in a SHOW/HIDE hidden div?, so users maybe click on a link and have these 3 pieces of information suddenly appear underneath any one row on the 900px table?

I have struggled for hundreds of hours just to get to this final stretch...So I need a final suggestion (or push off a cliff) as to where to look next for this answer...

Thank you in advance for any "easy" to understand suggestions you may have to offer me!!

Upvotes: 0

Views: 89

Answers (4)

user319198
user319198

Reputation:

use short headings and show full headings on mouse-over or title attribute.

Show limited char in table cells. And for detailed view show them in pop up div's or mouse-over events.

Upvotes: 0

MyStream
MyStream

Reputation: 2553

Create a link in your furthest right hand column (for example). Use an anchor link like this:

<a href="#extra-<?php echo $counter; ?>" class="see-more">See More</a>

In the next table row, put in a hidden <div id="extra-<?php echo $counter; ?>" class="hidden-more-data">..your data here..</div>

You can structure your data any way you like in those elements.

In CSS, you can hide .hidden-more-data with {display:none;}

Using jQuery, you can use $('.see-more').live('click',function(){}); in this kind of fashion:

$('.see-more').live('click',function(){

   var href = this.href;

   $(href).toggle();

   return false;

});

And various similar possibilities.

Upvotes: 0

Prasad Rajapaksha
Prasad Rajapaksha

Reputation: 6190

Since you said that you are using datatable plugin, You can use following example to display lengthy details. Once you click on expand button, it will expand the particular row.

http://datatables.net/release-datatables/examples/api/row_details.html

Upvotes: 2

Ignacio Vazquez-Abrams
Ignacio Vazquez-Abrams

Reputation: 799024

Users don't need (and usually don't care) about all this information. Allow them to configure which columns they can see, and if they choose too many for the width then it's not your problem.

Upvotes: 0

Related Questions