aoColumns: does not match known number of columns

Wavfact

I am using aoColumns to add an additional column to each row so I can add a edit/delete feature. But keep getting:

DataTables warning (table id = 'sortable'): Added data (size 6) does not match known number of columns (7). I can not figure out why this is happenning..

[code]


$.fn.dataTableExt.oStdClasses.sWrapper = 'no-margin last-child';
$.fn.dataTableExt.oStdClasses.sInfo = 'message no-margin';
$.fn.dataTableExt.oStdClasses.sLength = 'float-left';
$.fn.dataTableExt.oStdClasses.sFilter = 'float-right';
$.fn.dataTableExt.oStdClasses.sPaging = 'sub-hover paging_';
$.fn.dataTableExt.oStdClasses.sPagePrevEnabled = 'control-prev';
$.fn.dataTableExt.oStdClasses.sPagePrevDisabled = 'control-prev disabled';
$.fn.dataTableExt.oStdClasses.sPageNextEnabled = 'control-next';
$.fn.dataTableExt.oStdClasses.sPageNextDisabled = 'control-next disabled';
$.fn.dataTableExt.oStdClasses.sPageFirst = 'control-first';
$.fn.dataTableExt.oStdClasses.sPagePrevious = 'control-prev';
$.fn.dataTableExt.oStdClasses.sPageNext = 'control-next';
$.fn.dataTableExt.oStdClasses.sPageLast = 'control-last';

$(document).ready(function() {
$('.sortable').each(function(i)
{
var table = $(this),
oTable = table.dataTable({
"sPaginationType": "full_numbers",
"bProcessing": false,
"bServerSide": true,
"sAjaxSource": "./server_processing.php",

"aoColumns": [null, null, null, null, null, null, { "bSortable": false,
"fnRender": function(oObj) {
var cId = oObj.aData[0];
return ''+cId+'';
}
}],

/*
* Set DOM structure for table controls
* @url http://www.datatables.net/examples/basic_init/dom.html
*/
sDom: '<"block-controls"<"controls-buttons"p>>rti<"block-footer clearfix"lf>',

/*
* Callback to apply template setup
*/
fnDrawCallback: function()
{
this.parent().applyTemplateSetup();
},
fnInitComplete: function()
{
this.parent().applyTemplateSetup();
}
});
// Sorting arrows behaviour
table.find('thead .sort-up').click(function(event)
{
// Stop link behaviour
event.preventDefault();

// Find column index
var column = $(this).closest('th'),
columnIndex = column.parent().children().index(column.get(0));

// Send command
oTable.fnSort([[columnIndex, 'asc']]);

// Prevent bubbling
return false;
});
table.find('thead .sort-down').click(function(event)
{
// Stop link behaviour
event.preventDefault();

// Find column index
var column = $(this).closest('th'),
columnIndex = column.parent().children().index(column.get(0));

// Send command
oTable.fnSort([[columnIndex, 'desc']]);

// Prevent bubbling
return false;
});
} );
});

[/code]

My html is:

[code]



ID
Name
Company
Email
Role
Active
Actions










[/code]

I'm using the server side php script that came with the demo (works great for my needs!) almost as-is.. Can someone tell me what I am missing?

Thanks!
Dennis

allan

My guess is that the JSON coming back from the server only has 6 elements per array. Can you post a sample of the JSON return?

Allan

Wavfact

It was only bringing back 6 columns.. The 7th was simnply for the actions column (ie. Edit, Delete).

I worked aroudn it by bring in another field from the table which wasn't needed (zipcode) than replaced the contents with what I needed.. Works.. but doesn't seem like a proper way to do it..

[code]
"sAjaxSource": "./server_processing.php",
"aoColumns": [null, null, null, null, null, null, { "bSortable": false,
"fnRender": function(oObj) {
return ' ';
}
}],
[/code]

The above is just placeholders for now to see how it would look..

allan

The way I would suggest doing it so to have just a blank field for the 7th column. If DataTables is expecting 7 columns in the display, then it needs to get all 7 back from the server - otherwise it can't tell which one is missing (i.e. should it skip the first, the last or something else). So just an empty string is the correct way to do it.

Allan

thirdy

Hi, I have the same concern :)

Right now I have "" empty strings from the server-side.

Is there any way to pre-process the JSON from the server to add empty strings (or better, add the actual content i.e. Edit, Delete)?

thanks a lot, datatables is really great!

ardoramor

Hi Allan, it's a pleasure to find such a plugin! Very neat!!

If you don't mind me suggesting an option that may fix Thirdy's and my concern of presentation. Is it possible to add "bSkip": to aoColumns and aoColumnDefs that would hint dataTables to avoid the specific column? In such a case, the error message will be generated if
[code]aDataSupplied.length != ( oSettings.aoColumns.length - ( oSettings.aoColumns.grep( function ( elem ) {
return ( elem.bSkipped === true );
} ) ).length )[/code] Styles can still be applied to the skipped columns by using aoColumns and aoColumnDefs but cells will be left blank unless fnRender is specified.

I've searched around the forums and became aware that quite a few people are looking for a similar solution option. What do you think? This way, we can separate data from presentation and things would be cleaner.

Either way, your plugin is awesome!!!

allan

I'm planning on something along these lines for 1.8. The thing is at the moment that the data and presentation are directly (and intentionally so) linked. DataTables is basically a viewport at a table and a table's data contains readable information - hence the assumption that column information will always be presented to DataTables for rendering.

There are of course cases when this simply isn't enough - a common one I find myself using is a hidden column for the row ID. This is really meta data for the table, rather than presentation data, and I intent to make this part considerably more flexible in 1.8. For the display part, I will probably continue to enforce that what is to be displayed must be defined (otherwise, how do you represent undefined data...).

One possible way of doing it at the moment with 1.7 is to use fnServerData to pre-process the JSON returned from the server - although you don't then have access to the object again... Keep an eye out for 1.8 :-)

Allan