Error: Data (sized undefined) does not match columns
Error: Data (sized undefined) does not match columns
grrlsendlight
Posts: 19Questions: 0Answers: 0
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.
[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.
This discussion has been closed.
Replies
Allan
[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!
Regards,
Allan
[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
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.
[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
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
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
[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
[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]
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
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?
[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
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.
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;
[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
[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