Using ajax to load datatables and loading new table

goblix

So I currently have my index.php page which is made up of

<----- links ----->



so the links run an ajax call to load a page to the content div and will pass a tablename as a paramater to the page being loaded.

In this content page I am using datatables and php to dynamically specify that table to load rather than modifying the datatables code manually depending on each table.
It uses server-side processing connecting to my database with a selected live command.
So far this part works. Where I am having issues with is when cycling between pages to load a table. When loading an ajax page with the same table or a different table my function to select tables feature stops working.
I have a hunch that it is because some data is stored into global JSON variables of which is causing conflicts but I'm no JSON expert.

[code]
<?php
require('inc/mysqlcall.php');

$TABLENAME = $_GET['table'];
$hidden_fields = array();

$sql = 'show fields from '.$TABLENAME.';';
$result = mysql_query($sql) or DIE ("failed query");
$fields = array();
while( $row = mysql_fetch_array($result, MYSQL_ASSOC)){
foreach($row as $key => $v){
if($key == 'Field'){
array_push($fields, $v);
}
}
}

/* Indexed column (used for fast and accurate table cardinality) */
$sql = "show fields from $TABLENAME where `KEY`='PRI';";
$result = mysql_query( $sql, $mysqld ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
$PRI_KEY = array();
while ($row = mysql_fetch_array($result, MYSQL_ASSOC) ) {
foreach($row as $key => $v){
if($key == 'Field' && $v !='rownum'){
array_push($PRI_KEY, $v);
}
}
}
?>

var fields = [];
var asInitVals = new Array();
var rowdata = [];
var rows = "";
<?php
foreach($fields as $col => $v){
echo "fields.push('$v');";
}
?>
$(document).ready(function() {
var aSelected = [];

var oTable = $('#Calls').dataTable({
"sScrollX": "100%",
"bSort": true,
"bPaginate": true,
"bScrollInfinite": false,
"sAjaxSource": "scripts/server_processing.php",
"bServerSide": true,
"bJQueryUI": true,
"aoColumns": [

<?php
foreach($fields as $row => $v){
if($v == "rownum"){
echo '{ "bSearchable": false,
"bVisible": false },';
}else
echo 'null,';
}
?>
],
"fnServerParams": function ( aoData ){
//Add data
aoData.push( { "name": "table", "value": <?php echo "\"$TABLENAME\""; ?> } );
$("tfoot input").each( function (i) {
aoData.push( { "name": encodeURIComponent(this.name), "value": this.value } );
});
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData.DT_RowId, aSelected) !== -1 ) {
$(nRow).addClass('row_selected');
}
}
});
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("#search input").each( function (i) {
asInitVals[i] = this.value;
} );

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

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

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

/* Click event handler 1 click to select, 2 clicks to edit*/
$('#Calls tbody tr').live('click', function (e) {
if( !($("#editcell").is("*") )){
var id = this.id;

var index = jQuery.inArray(id, aSelected);

if ( index === -1 ) {
aSelected.push( id );
} else {
aSelected.splice( index, 1 );
}

$(this).toggleClass('row_selected');
}
} );
});
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();

for ( var i=0 ; i $v){
echo "".$v."";
}

echo "";
?>



Loading Server data



<?php
echo "";

foreach($fields as $col => $v){
echo "";
}

echo "";
?>


[/code]

Any suggestions or help would be much apprectiated.