click to hide/show table
click to hide/show table
Hello,
I've multiple tables and I don't use class ID (It would be too simple xD), I don(t know if this is important but It's for use as a wordpres plugin).
I want to have a link to hide or show the entire table.
Hide the table content is simple by adding the correct class to the dom but as I use bjqueryui (so I can use themes), the table is surrounded by another tables to make the header/footer, and I don't know how to hide them.
I try to use the fnDraw() but I'm still too newbie to understand the correct usage on it ;(
can you help me?
Here is the javascript code:
[code]
jQuery(document).ready(function() {
jQuery(".dataTable").dataTable({
"bInfo": true,
"bJQueryUI": true,
"bPaginate": false,
"bAutoWidth": false,
"bFilter": false,
"sScrollX": "100%",
"sScrollXInner": "100%",
"bProcessing": true,
"bSort": false,
"oLanguage": { "sInfo": ' ' },
"aoColumns": [
{ "sWidth": "12px" },
{ "sWidth": "100px" },
{ "sWidth": "10px" },
{ "sWidth": "10px" },
{ "sWidth": "20px" },
{ "sWidth": "30px" },
null,
null,
null,
null,
null
],
"asStripClasses": [ 'ui-state-hover', 'ui-state-default' ]
});
});
function afficheClass(baliseClass) {
var x = document.getElementsByClassName(baliseClass) ;
for (var i=0; i
I've multiple tables and I don't use class ID (It would be too simple xD), I don(t know if this is important but It's for use as a wordpres plugin).
I want to have a link to hide or show the entire table.
Hide the table content is simple by adding the correct class to the dom but as I use bjqueryui (so I can use themes), the table is surrounded by another tables to make the header/footer, and I don't know how to hide them.
I try to use the fnDraw() but I'm still too newbie to understand the correct usage on it ;(
can you help me?
Here is the javascript code:
[code]
jQuery(document).ready(function() {
jQuery(".dataTable").dataTable({
"bInfo": true,
"bJQueryUI": true,
"bPaginate": false,
"bAutoWidth": false,
"bFilter": false,
"sScrollX": "100%",
"sScrollXInner": "100%",
"bProcessing": true,
"bSort": false,
"oLanguage": { "sInfo": ' ' },
"aoColumns": [
{ "sWidth": "12px" },
{ "sWidth": "100px" },
{ "sWidth": "10px" },
{ "sWidth": "10px" },
{ "sWidth": "20px" },
{ "sWidth": "30px" },
null,
null,
null,
null,
null
],
"asStripClasses": [ 'ui-state-hover', 'ui-state-default' ]
});
});
function afficheClass(baliseClass) {
var x = document.getElementsByClassName(baliseClass) ;
for (var i=0; i
This discussion has been closed.
Replies
you can see what is my problem at the following url: http://dev.defunct.fr/?page_id=16
please don't visit with IE or Chrome, the display is very ugly (a lot of overflow around the datatables I will try to solve this later).
still no answer ;(
does anyone have a solution/example to hide a table after init with the use of a javascript link ?
my constraints:
- Want to work on multiple tables so I use class name, not class ID.
- I use "bJqueryui": true
- need to redraw as initial with the same or another javascript link
I've tried so much different ways it's seems impossible.
Have a look @ http://api.jquery.com/toggle/ 2nd & 3d Demo ;-)
The solution is realy very-very-very easy ;-)
Chiers
Steve
thanks for your answer ;)
but my problem is that I don't known what id the class or element I need to hide. :/
As I am using "bjqueryui":true, my tables are embedded by another table representing the header.
When I look at the "generated source code" (through webdevelopper, an addon for firefox) I can see this bloc above each tables:
[code]
Processing...
Personnage
R
C
Level
Hfs
Tank
Heal
Dps
PvP
Commentaire
[/code]
This bloc is added by the "bJqueryui":true.
I can't choose to hide the dataTables_wrapper class because I have another datatables I don't want to hide.
As I have no solutions for the moment, I've reformatted my page to have only one table and hide certains elements but it's not the goal.