wordpress + row details

stryjxx

Hi everyone,
I would like to ask you for help in an issue that I try to deal with. I've created a simple web portal for clients that are able to see data from database and details about them(using: https://datatables.net/release-datatables/examples/server_side/row_details.html example) It works great in browser: http://i.imgur.com/2lIxzXN.png with this code:
[code]

var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Book and Author:'+aData[1]+' '+aData[2]+'';
sOut += 'Link to source:Show Details';
sOut += '';

return sOut;
}

$(document).ready(function() {
oTable = $('#BOOKS').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "function_retrieve_data_details_php_script.php",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "bookname", "value": "<?php echo $bookname ?>" } );
aoData.push( { "name": "lastname", "value": "<?php echo $lastname ?>" } );
aoData.push( { "name": "period", "value": "<?php echo $period ?>" } );
},
"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
null,
],
"aaSorting": [[1, 'asc']]
} );

$('#BOOKS 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 = "examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );

[/code]
However when I insert it into wordpress I encounter problems: http://i.imgur.com/6hgxsS4.png I changed all paths and I think it should work. I noticed that I can show data at least when I remove this function from the code:
[code]
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Book and Author:'+aData[1]+' '+aData[2]+'';
sOut += 'Link to source:Show Details';
sOut += '';

return sOut;
}
[/code]
But I don't have the functionality, it looks like this: http://i.imgur.com/PpNGOjs.png
I've spent a lot of time on this, I tried to change php plugins in wordpress etc, but nothing helped. Is there anybody who could come up with the solution?

stryjxx

all I needed to do was to create additional something.js file, add the function there and include this file into page.