So I have the following code in my app:

[code]
function ShowColumn(columnNum) {
var table = $('#MemberStatisticGrid').dataTable();

$('#SelectedMetricList option').each(function (index) {
table.fnSetColumnVis($(this).val(), false);
});

table.fnSetColumnVis(columnNum, true);
setDetailOpenCloseEvent(table.fnSettings()); // Re-update event binding
}

function getDetailsTable(rowNum) {
var table = $('#MemberStatisticGrid').dataTable();
var data = table.fnGetData(rowNum);

return 'Number Of Companies: ' + data[3];
}

function setDetailOpenCloseEvent(settings) {
var table = $('#MemberStatisticGrid').dataTable();
$('td img', table.fnGetNodes()).click(function () {
var row = this.parentNode.parentNode;
if (this.src.match('details_close')) {
/* This row is already open - close it */
this.src = '@Url.Content("~/Content/Images/details_open.png")';
var nRemove = $(row).next()[0];
nRemove.parentNode.removeChild(nRemove);
}
else {
/* Open this row */
this.src = '@Url.Content("~/Content/Images/details_close.png")';
table.fnOpen(row, getDetailsTable(row), 'details');
}
});
}

$(function() {
$('#MemberStatisticGrid').dataTable({
sDom: '<>rt<"clear">',
aoColumnDefs: [
{ bSortable: false, aTargets: [ 0 ] }
],
fnDrawCallback: setDetailOpenCloseEvent,
bFilter: false
});

$('#SelectedMetricList').change(function() {
ShowColumn($('#SelectedMetricList').val());
});

ShowColumn(3);
});
[/code]

I am experiencing several issues:

1) If I go to the 2nd page, none of the expand images react to the click event
2) If I expand the detail for a record, then collapse the detail, and then go to the 2nd page, the last record has it's detail area expanded
3) If I expand then collapse a detail for a record, and then call ShowColumn(3);, the detail view becomes expanded again. All expand buttons are then unresponsive to clicks.

Does anyone know how I can work around this?

Thanks,