wordpress + row details

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:

		<script type="text/javascript" charset="utf-8">
			var oTable;
			
			/* Formating function for row details */
			function fnFormatDetails ( nTr )
			{
				var aData = oTable.fnGetData( nTr );
				var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
				sOut += '<tr><td>Book and Author:</td><td>'+aData[1]+' '+aData[2]+'</td></tr>';
				sOut += '<tr><td>Link to source:</td><td><a HREF="http://localhost:8080/DataTables-1.9.4/examples   /details_for_row.php?bookname='+aData[1]+'&lastname='+aData[2]+'">Show Details</a></td></tr>';
				sOut += '</table>';
				
				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' );
					}
				} );
			} );
		</script>

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:

			/* Formating function for row details */
			function fnFormatDetails ( nTr )
			{
				var aData = oTable.fnGetData( nTr );
				var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
				sOut += '<tr><td>Book and Author:</td><td>'+aData[1]+' '+aData[2]+'</td></tr>';
				sOut += '<tr><td>Link to source:</td><td><a HREF="http://localhost:8080/DataTables-1.9.4/examples/details_for_row.php?bookname='+aData[1]+'&lastname='+aData[2]+'">Show Details</a></td></tr>';
				sOut += '</table>';
				
				return sOut;
			}

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?