Error: Data (sized undefined) does not match columns

grrlsendlight

Hi I apologize for the newbie questions. I'm pretty new to jQuery and json, so I'm just diving right in here. I'm calling in a json file where the records look like this:

[code]
{
"pul": 35000.0,
"phone": "True",
"dl": 8528.0,
"pdl": 35000.0,
"name": "Allied Telecom Group, LLC",
"county_name": "Fairfax",
"bill": "114.99",
"ul": 8682.0
},
[/code]

here's my js where i've defined the top level and details level. I'm just testing now but I want to eventually use the show and hide table:

[code]
var oTable;

function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Data: aData[1]';
sOut += 'Data: aData[2]';
sOut += 'Data: aData[3]';
sOut += 'Data: aData[4]';
sOut += '';

return sOut;
}

$(document).ready(function() {
oTable = $('#providerTable').dataTable( {
"bProcessing": true,
"aServerSide": true,
"aoColumns": [ //This identifies column data types to aid sorting.
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
null,
null,
null,
null
],
"sAjaxSource": "speeds.json",
"fnServerData": function ( sSource, aoData, fnCallback ){
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
});
[/code]

and my html:

[code]

Search provider information
Click on a provider to get detailed information about their performance and cost.




Col 1
Col 2
Col 3
Col 4













[/code]

you can view what i currently have running here: http://jessefoltz.webfactional.com/static/meghan/test/irw-map.html

also, when firebug is giving me this error -- not sure if it's something with dataTables or something on my end:

aDataSupplied.slice is not a function
http://jessefoltz.webfactional.com/static/meghan/test/datatables/media/js/jquery.dataTables.js
Line 2597

any help, advice, etc would be greatly appreciated. i'm kind of stuck.

allan

I just had a look at your table and it looks like it is working okay now (I suspect from your post you had a JSON format that DataTables wasn't expected) - are you happy with everything now, or have I missed something? :-)

Allan

grrlsendlight

yeah we have the data flowing. although i am trying to switch the last two columns using aoColumnDefs and sNames but it's not showing any changes? in my js the data is ordered provider, bill, cmbs, speed. [ "Allied Telecom Group, LLC", "114.99", "13.48", "8528.00" ] but i'd like it to display provider, bill, speed, cmbs. from previous posts i've gathered that this is how i can accomplish this:

[code]
$(document).ready(function() {
oTable = $('#providerTable').dataTable( {
"oLanguage": {
"sInfo": "Showing _TOTAL_ providers",
},
"bProcessing": true,
"aServerSide": true,
"bLengthChange": false,
"sInfo": false,
"bPaginate": false,
"aoColumnDefs": [
{ "sName": "provider", "aTargets": [ 0 ] },
{ "sName": "bill", "aTargets": [ 1 ] },
{ "sName": "speed", "aTargets": [ 3 ] },
{ "sName": "cmbs", "aTargets": [ 2 ] }
],
"aoColumns": [ //This identifies column data types to aid sorting.
{ "sName": "provider" },
{ "sName": "bill" },
{ "sName": "speed" },
{ "sName": "cmbs" }
],
"sAjaxSource": "averages.js",
"fnServerData": function ( sSource, aoData, fnCallback ){
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
});
[/code]

i'm also going to be adding an onclick function to display another set of corresponding data / toggle views. this should be done with in aoColumnDefs as well, correct?

thanks much!

allan

It looks like you've got both aoColumnDefs and aoColumns defining the names of the columns - and aoColumns will always take priority. So the order of the columns is provider, bill, speed, cmbs - which is looks like is slightly different from your aoColumnDefs array. You could just remove aoColumnDefs and alter aoColumns as needed.

Regards,
Allan

grrlsendlight

hm i've tried several different way. aTargets is telling where the index is supposed to display, yeah? i'm trying to get cmbs[2] to display as the fourth column in the table. or am i not using aTargets correctly?

allan

I think you are using it correctly in the above code - it is just being overrriden. What you want is something more like this:

[code]
$(document).ready(function() {
oTable = $('#providerTable').dataTable( {
"oLanguage": {
"sInfo": "Showing _TOTAL_ providers",
},
"bProcessing": true,
"aServerSide": true,
"bLengthChange": false,
"sInfo": false,
"bPaginate": false,
"aoColumns": [ //This identifies column data types to aid sorting.
{ "sName": "provider" },
{ "sName": "bill" },
{ "sName": "cmbs" },
{ "sName": "speed" }
],
"sAjaxSource": "averages.js",
"fnServerData": function ( sSource, aoData, fnCallback ){
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
});
[/code]
You also need the server side source to return sColumns in the order that it is returning the information - so DataTables an resort it as needed.

Allan

grrlsendlight

ok i will play with that a bit.

another question, as i couldn't find mention of this, but is it possible to use one source for the top level table and then pull data from another source for the details, that would be filtered based on provider name? (using the show/hide details example). if that's possible and there was an example somewhere i could greatly appreciate.

again, sorry for the newbie questions! i'm fairly new to js and i'm on a tight deadline for a project. any help is much appreciated.

allan

Do you mean like this http://datatables.net/examples/api/row_details.html - but with the details coming from an Ajax call to the server? What you can do is something like this:

[code]
var newTr = oTable.fnOpen( nTr, 'Loading data...', 'details' );
$.getJSON( 'xhr.php', null, function (json) {
$('td', newTr).html( json.details );
} );
[/code]
Where 'json.details' is the object property returned from the server than you want to display (you can format it however you want of course and do whatever).

Regards,
Allan

grrlsendlight

hi allan -- here's the code i have implemented right now (again the current version can be see here: http://jessefoltz.webfactional.com/static/meghan/test/irw-map.html -- view provider)

a few things:
:: firebug is showing me that it's still not loading the speeds.json
:: which may be why i'm not showing anything
:: i'm still uncertain how i would need to filter the data being called up, it should be based on the provider name. i may see if my developer can spit out urls for me, but i'm not sure if that's the best way to go about it
:: i've changed the columns code as you mentioned above but it still needs to be having no affect on my table :(

[code]
var oTable;

$(document).ready(function(avgTable) {

oTable = $('#providerTable').dataTable( {
"oLanguage": {
"sInfo": "* Speed measured in megabits per second (Mbps)",
},
"bProcessing": true,
"bLengthChange": false,
"sInfo": false,
"bPaginate": true,
"sPaginationType": "full_numbers",
"aoColumns": [ //This identifies column data types to aid sorting.
{
"sName": "provider",
"fnRender": function(obj){
return '' + obj.aData[0] + "";
}
},
// { "sName": "records", "sClass": "alignRight" },
{ "sName": "bill", "sClass": "alignRight" },
{ "sName": "speed", "sClass": "alignRight"},
{ "sName": "cmbs", "sClass": "alignRight" },
// { "sName": "id", "bVisible": false }
],
"sAjaxSource": "averages.js",
"fnServerData": function ( sSource, aoData, fnCallback ){
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
});


//define new table with provider details
function fnFormatDetails ( oTable, newTr )
{
var aData = oTable.fnGetData( newTr );
var sOut = '';
sOut += '';
sOut += 'ISP';
sOut += 'Avg. downloaded speed*';
sOut += 'Avg. monthly cost';
sOut += 'Avg. cost per Mbps*';
sOut += '';
sOut += '';
sOut += '';

return sOut;
}


//build new table
var newTr = oTable.fnOpen( ntr, 'Loading data...', 'details' );
$(document).ready(function(speedsTable) {
$getJson('speeds.json', null, function(json) {
$('td', newTr).html(json.details);
});
var oTable = this;

// open and close details
$('#providerTable tbody td a').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( newTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, newTr), 'details' );
}
});
});
[/code]

i'm getting an error at this line that says "oTable is not defined"
[code]var newTr = oTable.fnOpen( ntr, 'Loading data...', 'details' ); [/code]

speeds.json lives here: http://jessefoltz.webfactional.com/static/meghan/test/speeds.json

as always any insight would be much appreciated. i also sent a donation yesterday to show that appreicate, i hope you received it!

best,
meghan

allan

Hi Meghan,

Yup - got the donation - thanks very much :-). It's much appreciated!

There are a couple of little syntax errors in the above code, so not suprised that there is a Javascript error. I've reflowed it here:

[code]

var oTable;

$(document).ready(function() {
oTable = $('#providerTable').dataTable( {
"oLanguage": {
"sInfo": "* Speed measured in megabits per second (Mbps)",
},
"bProcessing": true,
"bLengthChange": false,
"sInfo": false,
"bPaginate": true,
"sPaginationType": "full_numbers",
"aoColumns": [ //This identifies column data types to aid sorting.
{
"sName": "provider",
"fnRender": function(obj){
return '' + obj.aData[0] + "";
}
},
// { "sName": "records", "sClass": "alignRight" },
{ "sName": "bill", "sClass": "alignRight" },
{ "sName": "speed", "sClass": "alignRight"},
{ "sName": "cmbs", "sClass": "alignRight" },
// { "sName": "id", "bVisible": false }
],
"sAjaxSource": "averages.js",
"fnServerData": function ( sSource, aoData, fnCallback ){
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});

// open and close details
$('#providerTable tbody td a').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( newTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
//oTable.fnOpen( nTr, fnFormatDetails(oTable, newTr), 'details' );

var newTr = oTable.fnOpen( nTr, 'Loading data...', 'details' );
$.getJson('speeds.json', null, function(json) {
$('td', newTr).html(json.details);
});
}
});


//define new table with provider details
function fnFormatDetails ( oTable, newTr )
{
var aData = oTable.fnGetData( newTr );
var sOut = '';
sOut += '';
sOut += 'ISP';
sOut += 'Avg. downloaded speed*';
sOut += 'Avg. monthly cost';
sOut += 'Avg. cost per Mbps*';
sOut += '';
sOut += '';
sOut += '';

return sOut;
}
[/code]
Hopefully that should run okay - however...! I'm not certain about the use of fnOpen and $.getJson... The speeds.json file as a JS object with aaData in it - it looks like a DataTables data source - I thought you wanted to use $.getJson to load information into the details row (i.e. fnFormatDetails)?

Allan

grrlsendlight

thanks, allan! i'll plug this in. that is what i'm trying to do. load the speeds.json and display all the records for the particular divider from the first place. does that makes sense?

grrlsendlight

i'm not getting the error anymore, but it's still not loading speeds.json.

grrlsendlight

firebug is saying my json is not defined.

allan

Put in this:

[code]
$.getJson('speeds.json', null, function(json) {
console.dir( json );
$('td', newTr).html(json.details);
});
[/code]
And have a look at firebug - what does it say?

Allan

grrlsendlight

it's saying $getJson is not a function

grrlsendlight

i added the code for the open/close images and it's not showing those either. :

[code]
/* optional render for first column "fnRender": function(obj){
return '' +
obj.aData[0] +
"";
} */

// keep a note of the datatable
var oTable;

$(document).ready(function(avgTable) {

oTable = $('#providerTable').dataTable( {
"oLanguage": {
"sInfo": "* Speed measured in megabits per second (Mbps)",
},
"bProcessing": true,
"bLengthChange": false,
"sInfo": false,
"bPaginate": true,
"sPaginationType": "full_numbers",
"aoColumns": [ //This identifies column data types to aid sorting.
{
"sName": "provider",
/* "fnRender": function(obj){
return '' + obj.aData[1] + "";
}*/
} ,
// { "sName": "records", "sClass": "alignRight" },
{ "sName": "bill", "sClass": "alignRight" },
{ "sName": "speed", "sClass": "alignRight" },
{ "sName": "cmbs", "sClass": "alignRight" },
// { "sName": "id", "bVisible": false }
],
"sAjaxSource": "averages.js",
"fnServerData": function ( sSource, aoData, fnCallback ){
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
});



// open and close details
$('#providerTable tbody td a').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( newTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
//oTable.fnOpen( nTr, fnFormatDetails(oTable, newTr), 'details' );

var newTr = oTable.fnOpen( ntr, 'Loading data...', 'details' );
$getJson('speeds.json', null, function(json) {
$('td', newTr).html(json.details);
});
}
});

/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#providerTable thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

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

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#providerTable').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']]
});


//define new table details

function fnFormatDetails ( oTable, newTr )
{
var aData = oTable.fnGetData( newTr );
var sOut = '';
sOut += '';
sOut += 'ISP';
sOut += 'Avg. downloaded speed*';
sOut += 'Avg. monthly cost';
sOut += 'Avg. cost per Mbps*';
sOut += '';
sOut += '';
sOut += '';

return sOut;
}
[/code]

grrlsendlight

i'm wondering if you have some time to help me work through this a little? i can make another donation for your time when it's done. this has to be done very soon and i'm running out of options. i would really appreciate it.

allan

Yes certainly - I'm replying as quickly as possible :-)

Your Ajax get line needs to be like this:

[code]
$.getJSON('speeds.json', null, function(json) {
[/code]
that should solve the issue Firebug was reporting. However - I don't think it will address a more underlying issue which is that 'speeds.json' is not returning a 'details' property. Am I right in saying that you want it to load the details which should be put into the new 'details' row? If so - it is returning an array of data - how do you expect that to be shown in the details row?

Allan

grrlsendlight

thank you!

ok, so now i'm getting an error that says: "newTr is not defined"

error on line 89 of irw-map.html



is this a problem with the details not being passed? we have a lot of data being passed, so it should show up as almost a second table to display all the records that correspond with the provider they click on: http://184.73.198.37/cable/speeds.json. i've tried to format with fnFormatDetails in the code above, though i'm not confident that this is how i should be doing this? is there something i need to add to the speeds.json file?

allan

I think I'm starting to get it:

[code]
/* optional render for first column "fnRender": function(obj){
return '' +
obj.aData[0] +
"";
} */

// keep a note of the datatable
var oTable;

$(document).ready(function(avgTable) {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#providerTable thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

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

oTable = $('#providerTable').dataTable( {
"oLanguage": {
"sInfo": "* Speed measured in megabits per second (Mbps)",
},
"bProcessing": true,
"bLengthChange": false,
"sInfo": false,
"bPaginate": true,
"sPaginationType": "full_numbers",
"aoColumns": [ //This identifies column data types to aid sorting.
{
"sName": "provider",
/* "fnRender": function(obj){
return '' + obj.aData[1] + "";
}*/
} ,
// { "sName": "records", "sClass": "alignRight" },
{ "sName": "bill", "sClass": "alignRight" },
{ "sName": "speed", "sClass": "alignRight" },
{ "sName": "cmbs", "sClass": "alignRight" },
// { "sName": "id", "bVisible": false }
],
"sAjaxSource": "averages.js",
"fnServerData": function ( sSource, aoData, fnCallback ){
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});


// open and close details
$('#providerTable tbody td a').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( newTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
var newTr = oTable.fnOpen( nTr, fnFormatDetails(), 'details' );
$('table', newTr).dataTable( {
"sAjaxSource": "speeds.json?isp="+oTable.fnGetData(nTr)[0]
} );
}
});
});




//define new table details

function fnFormatDetails ( )
{
var sOut = '';
sOut += '';
sOut += 'ISP';
sOut += 'Avg. downloaded speed*';
sOut += 'Avg. monthly cost';
sOut += 'Avg. cost per Mbps*';
sOut += '';
sOut += '';
sOut += '';

return sOut;
}
[/code]
So the key difference here is this:

[code]
/* Open this row */
this.src = "../examples_support/details_close.png";
var newTr = oTable.fnOpen( nTr, fnFormatDetails(), 'details' );
$('table', newTr).dataTable( {
"sAjaxSource": "speeds.json?isp="+oTable.fnGetData(nTr)[0]
} );
[/code]
What I've done is to have fnFormatDetails create a table - and fnOpen inserts it into the new details row. Then, you initialise that new table with DataTables - and give it the speed.json file as the source.

I've added an 'isp' parameter just to show how it might be done - you might not need it, but it's there if you do!

Also a number of your initialisation parameters are outside the document ready function - I've moved them in, and the #providerTable table was being initialised twice for some reason - I've removed the second call - you might want to add bSortable:false to the first column.

One other thing - if you are going to insert a new column - it should really be done before initialising the DataTable - it's not possible to dynamically add and remove columns in DataTables. I've moved that code chunk.

Allan

grrlsendlight

Ok so I'm not seeing any errors right now: http://jessefoltz.webfactional.com/static/meghan/test/irw-map.html

however, it's still not adding the buttons to toggle the details. i just checked over the code again and it all looks like what you have set up in the example. is there something i'm missing? i still can't get the table to display anything but i'm not sure if i've implemented your example correctly.

grrlsendlight

OK so, another idea is to combine all the records into one json file. do you think that might be easier/better?

so here's and example the averages array: { "aaData": [ [ "Antietam Cable Television", "54.62", "5094.98", "15.05" ] ] }

and here's an example from speeds.json:

[ "Antietam Cable Television", "50.00", "5333.00", "9.38" ], [ "Antietam Cable Television", "85.00", "5220.00", "16.28" ], [ "Antietam Cable Television", "50.00", "5687.00", "8.79" ], [ "Antietam Cable Television", "39.99", "5658.00", "7.07" ], [ "Antietam Cable Television", "39.95", "5564.00", "7.18" ]


i'm struggling with how the shema would look like for that though to get the details table to display all the records that match that ISP.

so each record has ["ISP", "monthly_bill", "actual_speed"," cmbs"]

in the details table i would want each record to display something like this:

var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Monthly bill:'+aData[]+'';
sOut += 'Actual speed:'+aData[]+'';
sOut += 'Cost/Mbs:'+aData[]+'';
sOut += '';

return sOut;

allan

Here is another tidy up of the code:

[code]
var oTable;

$(document).ready(function(avgTable) {
var nCloneTh = document.createElement( 'th' );
$('#providerTable thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

oTable = $('#providerTable').dataTable( {
"oLanguage": {
"sInfo": "* Speed measured in megabits per second (Mbps)",
},
"bProcessing": true,
"bLengthChange": false,
"sInfo": false,
"bPaginate": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{
"sClass": "center",
"fnRender": function () {
return '';
}
},
{ "sName": "provider" },
{ "sName": "bill", "sClass": "alignRight" },
{ "sName": "speed", "sClass": "alignRight" },
{ "sName": "cmbs", "sClass": "alignRight" }
],
"sAjaxSource": "averages.js",
"fnServerData": function ( sSource, aoData, fnCallback ){
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});


// open and close details
$('#providerTable tbody td a').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( newTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
var newTr = oTable.fnOpen( nTr, fnFormatDetails(), 'details' );
$('table', newTr).dataTable( {
"sAjaxSource": "speeds.json?isp="+oTable.fnGetData(nTr)[0]
} );
}
});
});




//define new table details

function fnFormatDetails ( )
{
var sOut = '';
sOut += '';
sOut += 'ISP';
sOut += 'Avg. downloaded speed*';
sOut += 'Avg. monthly cost';
sOut += 'Avg. cost per Mbps*';
sOut += '';
sOut += '';
sOut += '';

return sOut;
}
[/code]
However it looks to me that you still have two initialisation calls for the '#providerTable' table with one of them setting the first column to bVisible:false - I don't think you want that and should remove it.

Also I think you should stick with this approach, and combining the data sources leads to additional complexity.

Allan

grrlsendlight

Hi -- I'm looking through the code and I don't see where I have it called twice / set the first column to not be visible?

grrlsendlight

I'm also getting a warning about data not matching column numbers, but I guess that might be caused by what you're referencing.

grrlsendlight

when i remove this line

[code]
{
"sClass": "center",
"fnRender": function () {
return '';
}
},
[/code]

it will load the data but then the table gets staggered from the header, like there's an extra column in the header but not in the table. i understand why it thinks that, but i don't know what else is causing the column error.

allan

The error message you are seeing I correct I believe. Your code adds another column to the table before it is initialised, so you have 5 columns (one for the show / hide). However your json for the main table only has 4 columns defined. You need to add another one for the new column.

Allan