fnOpen
fnOpen
Hi all, am new to datatables and have gotten most of what I wanted working (very cool software) but I am stumped on the fnOpen feature... I am trying to do something more complicated involving ajax, but my problem is with something simpler... and I suspect I am doing something dumb. I can't seem to get any row to open at all. Here is the js code in its simplest test form
$(function() {
var media_list_0 = $("#media_list_0").dataTable( {
"iDisplayLength": 50,
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "45px" },
{ "sWidth": "500px" },
{ "sWidth": "225px" },
{ "sWidth": "50px" },
{ "sWidth": "100px" },
{ "sWidth": "100px" },
{ "sWidth": "85px" },
{ "sWidth": "75px" }
] });
trace("opening test row");
media_list_0.fnOpen( $("#media_list_0 tr:first"), "this is a test", "details");
});
Here is the html for the table:
test
test
HCL
VHS
P1000146000000
566
1133
189
823478
293423
etc...
On load, I was expecting a row to show up just below the first row (whose contents are "this is a test" and whose class is "details"). But nothing shows up (though I do see the trace message). I have verified (with Firebug) that the selector above which selects the first row of the media_list_0 table is indeed selecting the first row of that table.
I also tried this variant of the js code:
$(function() {
var media_list_0 = $("#media_list_0").dataTable( {
"iDisplayLength": 50,
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "45px" },
{ "sWidth": "500px" },
{ "sWidth": "225px" },
{ "sWidth": "50px" },
{ "sWidth": "100px" },
{ "sWidth": "100px" },
{ "sWidth": "85px" },
{ "sWidth": "75px" }
] });
$("#media_list_0 tr").find(".plus").click(function(){
media_list_0.fnOpen( $("#media_list_0 tr:first"), "this is a test", "details");
$(this).toggleClass("minus");
});
});
In this case I expected to see a row added when a particular "plus" image is clicked. Due to the toggling (of the plus image with a minus one) I can see that the image is being clicked and (that the click event is firing) but again no added row.
Is it obvious what is wrong?
Thanks for your help!!!
$(function() {
var media_list_0 = $("#media_list_0").dataTable( {
"iDisplayLength": 50,
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "45px" },
{ "sWidth": "500px" },
{ "sWidth": "225px" },
{ "sWidth": "50px" },
{ "sWidth": "100px" },
{ "sWidth": "100px" },
{ "sWidth": "85px" },
{ "sWidth": "75px" }
] });
trace("opening test row");
media_list_0.fnOpen( $("#media_list_0 tr:first"), "this is a test", "details");
});
Here is the html for the table:
test
test
HCL
VHS
P1000146000000
566
1133
189
823478
293423
etc...
On load, I was expecting a row to show up just below the first row (whose contents are "this is a test" and whose class is "details"). But nothing shows up (though I do see the trace message). I have verified (with Firebug) that the selector above which selects the first row of the media_list_0 table is indeed selecting the first row of that table.
I also tried this variant of the js code:
$(function() {
var media_list_0 = $("#media_list_0").dataTable( {
"iDisplayLength": 50,
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "45px" },
{ "sWidth": "500px" },
{ "sWidth": "225px" },
{ "sWidth": "50px" },
{ "sWidth": "100px" },
{ "sWidth": "100px" },
{ "sWidth": "85px" },
{ "sWidth": "75px" }
] });
$("#media_list_0 tr").find(".plus").click(function(){
media_list_0.fnOpen( $("#media_list_0 tr:first"), "this is a test", "details");
$(this).toggleClass("minus");
});
});
In this case I expected to see a row added when a particular "plus" image is clicked. Due to the toggling (of the plus image with a minus one) I can see that the image is being clicked and (that the click event is firing) but again no added row.
Is it obvious what is wrong?
Thanks for your help!!!
This discussion has been closed.