"Cannot read property '_iDisplayStart of null" row detail error

bpeterson76

I'm attempting to develop a Datatable with expandable row details and column summing. All is working well at first glance. However, if a user of my application pulls up this page, expands the details on row, and reloads the page again, the row won't expand and the error "Cannot read property '_iDisplayStart of null in jquery.datatables.js:5157" is displayed in Firebug.

This every other load pattern of working/not working is driving me nuts and I haven't been able to find any reference to the error that it generates on the web. Does anyone know what could cure this issue?



[code] // Formating function for row details
function fnFormatDetails ( oTable, nTr ) {
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Notes'+aData[10]+ '';
sOut += '';
return sOut;
}

$(document).ready(function() {

// Insert a 'details' column to the table
var nCloneTh = document.createElement( 'th' );
$tablesort .= ' var nCloneTd = document.createElement( 'td' );
$tablesort .= ' nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$("#pipeline_report thead tr").each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$tablesort .= ' $("#pipeline_report tbody tr").each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );


var oTable = $("#pipeline_report").dataTable( {
"sPaginationType": "full_numbers",
"bFilter":true,
"bLengthChange": false,
"iDisplayLength": 10,
"bInfo": false,
"iDisplayStart": 0,
"bJQueryUI": true,
"bRetrieve": true,
"bAutoWidth": false,
"sDom": '<"top"i>rt<"bottom"flp><"clear">',
"aoColumns": [
{ "sWidth": "5%" },
{ "sWidth": "5%" },
{ "sWidth": "7%" },
{ "sWidth": "20%"},
{ "sWidth": "15%" },
{ "sWidth": "5%"},
{ "sWidth": "5%"},
{ "sWidth": "5%"},
{ "sWidth": "5%"},
{ "sWidth": "9%"},
{ "bVisible": false },
{ "sWidth": "7%"}
],

//Footer Callback for total sum
"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
var iPotential = 0;
var iEffective = 0;
var repnum;


//Get Potential (Filtered)
for ( var i=iStart ; i

bpeterson76

Allan, would destroying any previously rended datatables prior to starting a new one possibly have any effect on this error? Should I move this to bug reports?

ssgoh

Hi bpeterson76, have you managed to resolve this issue? I also having same problem when partial postback from page and returned error "Cannot read property '_iDisplayStart of null in jquery.datatables.js

I debugged it and it shows oTable settting is null when the I do my .Net partial postback.

I put this but is not working too. Does you have any suggestion?

my code:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined) {
partialPostBack();
}
}

function partialPostBack() {

var oTable;
//... oTable = $("#example").dataTable(....
}

allan

Can you link us to your example please? I'm not sure why oTable would be null from your description?

Thanks,
Allan

ssgoh

[code]


$(function () {
partialPostBack();
});

function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';

return sOut;
}

function createDetailsElement(){

var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
//nCloneTd.className = "center";
$('#example thead tr').eq(0).each( function () {
if ($(this).find('th').length==3)
this.insertBefore( nCloneTh.cloneNode( true ), this.childNodes[0] );
} );
$('#example thead tr').eq(1).each( function () {
if ($(this).find('th').length==3)
this.insertBefore( nCloneTh.cloneNode( true ), this.childNodes[0] );
} );

$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
}

function partialPostBack() {

var oTable;

$('#example tbody td img').live("click",function (events) {
var nTr = this.parentNode.parentNode;
if (this.src.match('expand_minus')) {
/* This row is already open - close it */
this.src = "http://localhost:2205/Test/images/expand_plus.gif";
oTable.fnClose(nTr);
}
else {
/* Open this row */
this.src = "http://localhost:2205/Test/images/expand_minus.gif";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
});

//example
oTable = $('#example').dataTable({
"bJQueryUI": true,
"bSort": true,
"bProcessing": false,
"bServerSide": true,
"bAutoWidth": true,
"bRetrieve" : true,
"sAjaxSource": "Webservices/DataTableTestService.svc/GetTable",
"fnServerData":
function (sSource, aoData, fnCallback) {
$.ajax({
"datatType": 'json',
"contentType": 'application/json',
"url": sSource,
"data": aoData,
"success": function (msg) {
var json = $.parseJSON(msg);
fnCallback(json);
createDetailsElement();
}
})
}
});
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined) {
partialPostBack();
}
}






ID
Name
Desc










Please wait...





<!-- this is a user control in .Net and it will call the "javascript:__doPostBack('ctl00$cphMaster$Page1$test','')"//-->



[/code]

Description:
I have a master page in .Net application. The master page has an update panel.
The entire code is a user control and it is inside the update panel.
I click on the test link button and do a partial postback.
Then, I click on the img to expand the details of the 'example' dataTable.
I got the error : "Cannot read property '_iDisplayStart of null in jquery.datatables.js"

allan

Can you post a link please? That's quite a lot of code for me to get my head around quickly and there is dynamic code in there as well :-)

Allan

ssgoh

Thank you but I tried out another way already where i return my message and put it in the right side of the dataTable and set position fixed. It is easier to read the row that has been clicked and view the details on the right side of the DataTable for me.

//example DataTable
$("#example > tbody > tr")
.live('click', function (event) {

var id = $(this).find(':checkbox').attr('id');
$("#desc").html(getMessage(id));

});






ID


Name


Desc















Please wait...