"No matching records found" when first column contains html code

jepper

Hi,

I'm using your awesome plugin for a little hobby website but i've bumped into a strange problem.
When the first column contains html code (in my case and img and a link) the plugin refuses to render the table.
When i change it with the second col it works without any problems.

The datatable plugin is configured with an odd/even expanding row configuration and two custom sort extensions. (so first col on the table is col 1 for the plugin, 0 is hidden) The css is only slightly edited to provide a minimal look.

This is the datatables code:

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



$('#example tbody tr').live('click', function () {
var nTr = $(this).parents('tr')[0];
var Row = oTable.fnGetPosition( $(this).closest('tr')[0]);
var Col = oTable.fnGetPosition( this );

if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it
this.src = "media/images/details_open.png";*/
oTable.fnClose( nTr );
}
else
{
/* Open this row
this.src = "media/images/details_close.png";*/
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr, Row), 'details' );
}
});

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

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

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {
"bPaginate": true, "sPaginationType": "full_numbers", "bLengthChange": false, "bFilter": true, "bSort": true,"bInfo": false,"bAutoWidth": false,
"aoColumnDefs": [{ "sType": "NumericOrBlank", "aTargets": [4] },{ "sType": "title-numeric", "aTargets": [8] },{ "bSortable": false, "aTargets": [2,3]}, { "bVisible": false, "aTargets": [ 9 ]}, { "bVisible": false, "aTargets": [ 0 ]}],
"aaSorting": [[8, 'desc']]
});

$('#example tbody td').live('click', function () {
var nTr = $(this).parents('tr')[0];
var Row = oTable.fnGetPosition( $(this).closest('tr')[0]);
var Col = $(this).index();

if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
//this.src = "media/images/details_open.png";
oTable.fnClose( nTr );
}
else
{
if( Col == 7){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
alert('Authorisatie Facebook ontvangen, download gebruiksgegevens: hoeveelheid katten en fetishes! ;)');
return false;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
alert('Geen authorisatie facebook');
return false;
} else {
alert('DEBUG: Verkrijg authorisatie facebook, volgt nu');
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});

return false;
}
});
return false;
}

/* Open this row */
//this.src = "media/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr, Row), 'details' );

}
} );
[/code]

The custom sort code is nothing out of the ordinary.
The table is correctly formated as reversing the first two td's in the php script makes a functioning table.

This is the td code:

[code]




'.$Price.'


'.$Package.'


'.$PriceKGram.'


'.$ProductName.'


'.$BrandName.'


'.$SubCat.'


('.$Votes.')


Korte review:
'.$Details.'

Lees meer hier.

'; [/code]


a live version of the code with the first two tables reversed can be found here:
(just click cancel on the password prompt) Its still in dev mode so there is some dev code (ie the fb sdk stuff) in there.
http://www.wheyvergelijker.nl

Thanks!

jepper

this is the debug on a not working config: http://debug.datatables.net/ocalut
and the debug on a working version (swapped cols): http://debug.datatables.net/ogusen

jepper

Anybody stumbled into the same bug? I've been experimenting this weekend with it but cant find the cause. Even an empty or tag disables the rendering of the table...

allan

I think we'd probably need to see a test case showing the issue. Unfortunately the debug trace doesn't show anything that I wouldn't expect (other than it shouldn't be an empty table!).

Actually - one thing - does it show the records if you remove your custom filtering function?

Allan

jepper

oh man, how stupid of me!!!

I only removed the col sorting code forgetting that the slider code runs on load. So the adata[0] selection and sorting in $.fn.dataTableExt.afnFiltering.push() broke the rendering of the table. The JSbin version actually showed this failure on the nightly, chrome's and firefox render engines didnt on 1.9.2.

So i'm terribly sorry but i guess this was one of those "why didnt i think of that" moment that makes programming fun (and not so fun).

When the site breaks over even and you've enabled donations again I'll chip in some of the proceedings for the awesome plugin :)