Data Tables breaking in Internet Explorer
Data Tables breaking in Internet Explorer
Hi, my application uses a very simple version of dataTables. The user performs a database search, whose results are passed into this function as an array of arrays (n x 6).
[code]
function makeDataTable(aaData){
var colWidth = '20%';
/*
Debugging statements to make sure that I really have an n x 6 array, tested with the first three entries.
They come up with the expected values
var k,j = 0;
for(k = 0; k < 3; k++)
for(j = 0; j< 6; j++)
console.log(aaData[k][j]);
*/
if(oTable)
oTable.fnClearTable();
oTable = $('#lookup_data_table').dataTable({
'aaData' : aaData,
'aoColumns' : [
{ 'sTitle' : 'Last Name',
'sWidth' : colWidth},
{ 'sTitle' : 'First Name',
'sWidth' : colWidth},
{ 'sTitle' : 'Net Id',
'sWidth' : colWidth},
{ 'sTitle' : 'Home Town',
'sWidth' : colWidth},
{ 'sTitle' : 'byu_id',
'bVisible' : false},
{ 'sTitle' : 'person_id',
'bVisible' : false},
],
'bDestroy': true,
'bAutoWidth' : false,
'sPaginationType': 'full_numbers',
'bLengthChange': false,
'iDisplayLength': 10,
'fnDrawCallback': function(oSettings) {
$('#lookup_data_table tbody tr').click(function() {
var aData = oTable.fnGetData(this);
setSelectedStudent(aData);
$('#mask, #$popup_container').hide();
callBack(student);
});
},
'oLanguage' : {
'sZeroRecords': 'No person found'
}
});
[/code]
I built my application primarily in Firefox, and then started testing it on other browsers. So it works in Firefox, Chrome, and Safari, but I started testing it in IE9, and it is not working. The error that I get is "DataTables warning (table id= 'lookup_data_table'): Requested unknown parameter '6' from the data source for row 0." What is puzzling me is why it would work in some browsers, but not in all.
EDIT:
When I comment out the last column definition, then the error does not appear, but the 5th column definition 'byu_id' displays despite 'bVisible' being set to false. It does so with correct values. When I leave in all six column definitions, the table renders with 5 visible columns, but the values of the last column are all null.
Thanks in advance!
Chris
[code]
function makeDataTable(aaData){
var colWidth = '20%';
/*
Debugging statements to make sure that I really have an n x 6 array, tested with the first three entries.
They come up with the expected values
var k,j = 0;
for(k = 0; k < 3; k++)
for(j = 0; j< 6; j++)
console.log(aaData[k][j]);
*/
if(oTable)
oTable.fnClearTable();
oTable = $('#lookup_data_table').dataTable({
'aaData' : aaData,
'aoColumns' : [
{ 'sTitle' : 'Last Name',
'sWidth' : colWidth},
{ 'sTitle' : 'First Name',
'sWidth' : colWidth},
{ 'sTitle' : 'Net Id',
'sWidth' : colWidth},
{ 'sTitle' : 'Home Town',
'sWidth' : colWidth},
{ 'sTitle' : 'byu_id',
'bVisible' : false},
{ 'sTitle' : 'person_id',
'bVisible' : false},
],
'bDestroy': true,
'bAutoWidth' : false,
'sPaginationType': 'full_numbers',
'bLengthChange': false,
'iDisplayLength': 10,
'fnDrawCallback': function(oSettings) {
$('#lookup_data_table tbody tr').click(function() {
var aData = oTable.fnGetData(this);
setSelectedStudent(aData);
$('#mask, #$popup_container').hide();
callBack(student);
});
},
'oLanguage' : {
'sZeroRecords': 'No person found'
}
});
[/code]
I built my application primarily in Firefox, and then started testing it on other browsers. So it works in Firefox, Chrome, and Safari, but I started testing it in IE9, and it is not working. The error that I get is "DataTables warning (table id= 'lookup_data_table'): Requested unknown parameter '6' from the data source for row 0." What is puzzling me is why it would work in some browsers, but not in all.
EDIT:
When I comment out the last column definition, then the error does not appear, but the 5th column definition 'byu_id' displays despite 'bVisible' being set to false. It does so with correct values. When I leave in all six column definitions, the table renders with 5 visible columns, but the values of the last column are all null.
Thanks in advance!
Chris
This discussion has been closed.
Replies
Allan