Expanding Table Display with drop down, rows lack jquery handlers

robodude

Hello again everyone!

Suppose that my datatable has rows that have a class as ARow and SubARow.

[code]
$("tr.ARow, tr.SubARow").mouseenter(function (e) {
$(this).addClass("mouseoverRow");
});

$("tr.ARow, tr.SubARow").mouseleave(function (e) {
$(this).removeClass("mouseoverRow");
});
[/code]

Will work great and add/remove the class over the row that I current have my mouse over. However, if I expand by datatable using the drop down to show more rows, the additional rows do not have the mouseenter/mouseleave handlers attached to them. I confirmed this with the Visual Event browser plugin thing (which is absolutely amazing btw!)

I tried using the jquery .live but with no success.
[code]
$("tr.ARow, tr.SubARow").live('click', function () {
ToggleCollapse($(this));
});
[/code]

But wasn't able to get it working passed the initial displayed rows.

Thanks a ton in advance!
<3
John

robodude

I read about using fnGetNodes to get around this and while it works, it doesn't work for my table in particular because of the structure of my datatable.

See this post for reference: http://datatables.net/forums/comments.php?DiscussionID=2818&page=1#Item_6

What I did, which works perfectly for the first 10 default rows, is to group everything that belongs in the same tree to a single 'master' row that is used by DataTables.

The code below works:
[code]
$(oTable.fnGetNodes()).mouseenter(function (e) {
$(this).addClass("mouseoverRow");
});

$(oTable.fnGetNodes()).mouseleave(function (e) {
$(this).removeClass("mouseoverRow");
});
[/code]

But because this goes around the tree structure I have setup, I don't get this class applied to the appropriate (ARow and SubARow) rows:

[code]
$("tr.ARow, tr.SubARow").mouseenter(function (e) {
$(this).addClass("mouseoverRow");
});
[/code]

robodude

I also can't figure out why the DataTables events (pre-initialisation) example isn't working for me.

http://datatables.net/examples/advanced_init/events_pre_init.html

:(


I setup the default "Show ___ Entries" to -1 (All) and the code works perfectly but then I end up displaying the whole table from the outset, which is what I would like to avoid.

robodude

Ok going to try this:

[code]
var oTable = $('#MainContent_GridViewMain').dataTable({
"iDisplayLength": -1,
"aLengthMenu": [[25, 50, 75, 100, -1], [25, 50, 75, 100, "All"]]
}); //SiteMaster

$('td.jqAImage').parent().addClass("ARow");
$('td.jqSubAImage').parent().addClass("SubARow");
$("td.jqBProgress, td.jqSubAProgress, td.jqAProgress").each(function () {
MakeProgressBar($(this));
if ($(this).hasClass("jqBProgress")) {
ConvertIDtoURL($(this).next());
ConvertIDtoURL($(this).next().next());
}
});

$("select[name='MainContent_GridViewMain_length']").val(25);
$("select[name='MainContent_GridViewMain_length']").change();
[/code]

This loads/displays the whole table upfront, changes the pagination button to 25 and then fires the change event handler for the button. It's not pretty or ideal but it works. Thanks for reading!

---
BONUS:
For reference I also tried the following but its far to slow for my needs:

Whenever the dropdown pagination box is changed, rebind all the rows...
[code]
$("select[name='MainContent_GridViewMain_length']").change(function () {
CollapseAll();
$('td.jqAImage').parent().addClass("ARow");
$('td.jqSubAImage').parent().addClass("SubARow");
$("td.jqBProgress, td.jqSubAProgress, td.jqAProgress").each(function () {
MakeProgressBar($(this));
if ($(this).hasClass("jqBProgress")) {
ConvertIDtoURL($(this).next());
ConvertIDtoURL($(this).next().next());
}
});
});
[/code]