AJAX source displays data but will not sort
AJAX source displays data but will not sort
thelo
Posts: 5Questions: 0Answers: 0
I can get an ajax source to display, but none the sorts and filters are not working. I have tried in 1.9.4 and 1.10. I used a rowCallback sample from another discussion to add classes and id's on the ajax source file. I have tried many variations of data,mData, and mDataProp. My table data displays fine in the browser, but my debug "Table display" doesn't show any data so I feel like the sort is not seeing the data after the rowCallback. I've also tried without the rowCallback, additional classes, styles, and id's, but still couldn't get it to filter. I'm probably overlooking something basic. Can you help? full details are in the debug ucijuh
This discussion has been closed.
Replies
Allan
Unfortunately, its on a LAN and i cant link to it. How about source code? Some other way I can get info to you?
Not sure if this helps but I'm also having trouble with some normal ajax calls, like ajax tabs. they work fine in IE8 but they dont work in IE10 or firefox. I've been scouring the web to find solutions to that and all solutions i can find recommend headers like IE=IE9 and authentication problems. i have bootstrap's standard IE=edge (tried IE=IE9) and it didn't work. not sure how to handle my Digest authentication if its causing a problem. Using bootstrap 3 btw, and integrated it fine when i was it was DOM sourced. i Lost filtering when i switched to ajax
If you disable the digest auth, does it work a bit easier? You could try adding that in once you've got the table loading and operating correctly.
However, you already appear to have the Ajax data loading, so it is not that which is stopping the data from being sorted. If you look at the console in your browser, do you see any Javascript errors indicated?
Allan
It points to line 2778 of jquery-1.11.0.js (i've also tried the min version)
line 2778
elem = document.getElementById( match[2] );
This is also the same error that I get on the other ajax tabs in firefox. Odd because I doubt that my tab code is anything like the sorting headers.
Disabling auth didn't help. I got the other ajax problems working (just bad syntax).
It's definitely the way that I'm setting up the json data, and I'm still having trouble getting a working solution.
[code]
* Output
*/
$output = array(
"aaData" => array()
);
$i=0;
while ( $aRow = $rResult->fetch())
{
$row = array();
/* General output */
$row[$i] = array('PO'=>$aRow[ $aColumns[0] ],'id'=>$aRow["PO_LINE_CONC"],'value'=>$aRow["NET_AMOUNT"],'cssclass'=>'amount',
'POline'=>$aRow[ $aColumns[1] ],
'POCONC'=>$aRow[ $aColumns[2] ],'cssclass'=>'hide',
'AMT'=>$aRow[ $aColumns[3] ],
'STAT'=>$aRow[ $aColumns[4] ],
'RIA'=>$aRow[ $aColumns[5] ],
'RNF'=>$aRow[ $aColumns[6] ],
'DOCS'=>$aRow[ $aColumns[7] ],'cssclass'=>'text-center',
'MATCHED'=>$aRow[ $aColumns[8] ],'cssclass'=>'po-lookup text-center','href'=>'#','name'=>$aRow["PROJECT_NUMBER"],'value'=>$aRow["PO"],'style'=>'color:rgb(66,139,202);',
'MS'=>$aRow[ $aColumns[9] ],
'FCST'=>$aRow[ $aColumns[10] ],'cssclass'=>'col-md-1 text-center',
'ACTL'=>$aRow[ $aColumns[11] ],'cssclass'=>'col-md-1 text-center',
'PROG'=>$aRow[ $aColumns[12] ],
'PTN'=>$aRow[ $aColumns[13] ],
'RQST'=>$aRow[ $aColumns[14] ],
'VEND'=>$aRow[ $aColumns[15] ],
'TYPE'=>$aRow[ $aColumns[16] ],
'DESCR'=>$aRow[ $aColumns[17] ],
'SILO'=>$aRow[ $aColumns[18] ]);
$output['aaData'][] = $row[$i];
$i=$i+1;
}
echo json_encode($output);
[/code]
clip of Json return (keeping it short since there is some sensitive data):
{"aaData":[{"PO":"999999","id":"999999","value":"999999","cssclass":"col-md-1 text-center","POline":"3","POCONC":"999900","AMT":"celldata"....},{"PO":"row2data"... }]}
This works and filters but the custom classes are not applied.
My original problem was when I tried to follow this so i could get custom classes, id's, values, etc
http://www.datatables.net/forums/discussion/4924/ajax-source-and-custom-attributes/p1
The code below will display and also apply classes, but the filter sort doesn't work.
[code]
* Output
*/
$output = array(
"aaData" => array()
);
$i=0;
while ( $aRow = $rResult->fetch())
{
$row = array();
/* General output */
$row[] = array('PO'=>$aRow[ $aColumns[0] ],'id'=>$aRow["PO_LINE_CONC"],'value'=>$aRow["NET_AMOUNT"],'cssclass'=>'amount');
$row[] = array('POline'=>$aRow[ $aColumns[1] ]);
$row[] = array('POCONC'=>$aRow[ $aColumns[2] ],'cssclass'=>'hide');
$row[] = array('AMT'=>$aRow[ $aColumns[3] ]);
$row[] = array('STAT'=>$aRow[ $aColumns[4] ]);
$row[] = array('RIA'=>$aRow[ $aColumns[5] ]);
$row[] = array('RNF'=>$aRow[ $aColumns[6] ]);
$row[] = array('DOCS'=>$aRow[ $aColumns[7] ],'cssclass'=>'text-center');
$row[] = array('MATCHED'=>$aRow[ $aColumns[8] ],'cssclass'=>'po-lookup text-center','href'=>'#','name'=>$aRow["PROJECT_NUMBER"],'value'=>$aRow["PO"],'style'=>'color:rgb(66,139,202);');
$row[] = array('MS'=>$aRow[ $aColumns[9] ]);
$row[] = array('FCST'=>$aRow[ $aColumns[10] ],'cssclass'=>'col-md-1 text-center');
$row[] = array('ACTL'=>$aRow[ $aColumns[11] ],'cssclass'=>'col-md-1 text-center');
$row[] = array('PROG'=>$aRow[ $aColumns[12] ]);
$row[] = array('PTN'=>$aRow[ $aColumns[13] ]);
$row[] = array('RQST'=>$aRow[ $aColumns[14] ]);
$row[] = array('VEND'=>$aRow[ $aColumns[15] ]);
$row[] = array('TYPE'=>$aRow[ $aColumns[16] ]);
$row[] = array('DESCR'=>$aRow[ $aColumns[17] ]);
$row[] = array('SILO'=>$aRow[ $aColumns[18] ]);
$output['aaData'][] = $row;
$i=$i+1;
}
echo json_encode($output);
[/code]
And the difference in the json output is it is embedded in another array:
{"aaData":[[{"PO":"999999","id":"999999","value":"999999","cssclass":"col-md-1 text-center","POline":"3","POCONC":"999900","AMT":"celldata....},{"PO":"row2data"... }]]}
Can you point me in the right direction on how to get the custom attributes and keep the sorting?
What does your code for that currently look like - I don't see it here?
Allan
[code]
"rowCallback": function( nRow, aData, iDisplayIndex ) {
$('td',nRow).each(function(i,v){
var x = 0;
if (typeof aData[i]=='object'){
if (typeof aData[i].id!='undefined'){
$(v).attr('id',aData[i].id);
}
if (typeof aData[i].name!='undefined'){
$(v).attr('name',aData[i].name);
}
if (typeof aData[i].value!='undefined'){
$(v).attr('value',aData[i].value);
}
if (typeof aData[i].href!='undefined'){
$(v).attr('href',aData[i].href);
}
if (typeof aData[i].style!='undefined'){
$(v).attr('style',aData[i].style);
}
if (typeof aData[i].cssclass!='undefined'){
$(v).removeClass(aData[i].cssclass);
$(v).addClass(aData[i].cssclass);
}
$(v).html('');
if (typeof aData[i].data !='undefined'){
$(v).html(aData[i].data);
}
if (typeof aData[i].PO !='undefined'){
$(v).html(aData[i].PO);
}
if (typeof aData[i].POline !='undefined'){
$(v).html(aData[i].POline);
}
if (typeof aData[i].POCONC !='undefined'){
$(v).html(aData[i].POCONC);
}
if (typeof aData[i].AMT !='undefined'){
$(v).html(aData[i].AMT);
}
if (typeof aData[i].STAT !='undefined'){
$(v).html(aData[i].STAT);
}
if (typeof aData[i].RIA !='undefined'){
$(v).html(aData[i].RIA);
}
if (typeof aData[i].RNF !='undefined'){
$(v).html(aData[i].RNF);
}
if (typeof aData[i].DOCS !='undefined'){
$(v).html(aData[i].DOCS);
}
if (typeof aData[i].MATCHED !='undefined'){
$(v).html(aData[i].MATCHED);
}
if (typeof aData[i].MS !='undefined'){
$(v).html(aData[i].MS);
}
if (typeof aData[i].FCST !='undefined'){
$(v).html(aData[i].FCST);
}
if (typeof aData[i].ACTL !='undefined'){
$(v).html(aData[i].ACTL);
}
if (typeof aData[i].PROG !='undefined'){
$(v).html(aData[i].PROG);
}
if (typeof aData[i].PTN !='undefined'){
$(v).html(aData[i].PTN);
}
if (typeof aData[i].RQST !='undefined'){
$(v).html(aData[i].RQST);
}
if (typeof aData[i].VEND !='undefined'){
$(v).html(aData[i].VEND);
}
if (typeof aData[i].TYPE !='undefined'){
$(v).html(aData[i].TYPE);
}
if (typeof aData[i].DESCR !='undefined'){
$(v).html(aData[i].DESCR);
}
if (typeof aData[i].SILO !='undefined'){
$(v).html(aData[i].SILO);
}
}
});
},
[/code]