Hidden row and individual column filtering

Povilas

Hi,
I want to you both Hidden row and individual column filtering on a server sided table but then I get them together I get a filter for a extra column and the extra column is not actually being made for displaying the button for extra data it just becomes another column and data is started to place in it.
To confirm the mess in the screen I get an error:
[quote]DataTables warning (table id = 'example'): Requested unknown parameter '5' from the data source for row 0[/quote]
Here is the JavaScript. it is a bit messy because I was experimenting :
[code]
var asInitVals = new Array();

var oTable;
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:text you like';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';

return sOut;
}

$(document).ready(function() {

oTable = $('#example').dataTable( {
"sScrollY": 200,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./data.php",
"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
{ "sClass": "center" },
{ "sClass": "center" }
],
"aaSorting": [[1, 'asc']]
} );
$("#tabs").tabs( {
"show": function(event, ui) {
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}
} );

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );



/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );

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

[/code]

allan

What does the JSON that the server is sending back look like? You have defined the table with 6 columns, so it must be sending back 6 columns of information (from the sound of it though, it is only sending back 5).

Allan

allan

I should say that the other option is to use the sDefaultContent and mDataProp options for each column - that way you can have the server return only 5 elements in the array or the object. More about mDataProp here: http://datatables.net/blog/Extended_data_source_options_with_DataTables

Allan

Povilas

Thanks I almost fixed it. At firs it looked fine but filtering is a bit off. The filters are filtering a column to the right and skipped the first column after the controls one.

allan

Probably need to adjust the column index that is being sent to fnFilter then. Remember that isn't is the column index, not taking into account column visibility (i.e. as if all columns are available).

Allan

Povilas

Thanks for response but now I am experiencing an error there first columns filtering field is the same as global tables search. This must be relay newbish error or some mistype.