AJAX source displays data but will not sort

AJAX source displays data but will not sort

thelothelo Posts: 5Questions: 0Answers: 0
edited February 2014 in DataTables 1.10
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

Replies

  • allanallan Posts: 54,880Questions: 1Answers: 8,601 Site admin
    Can you link us to the page please. The information in the debugger suggests that it should work, so there is something going wrong that the debugger isn't picking up.

    Allan
  • thelothelo Posts: 5Questions: 0Answers: 0
    Wow! i didnt expect such a fast response!
    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
  • allanallan Posts: 54,880Questions: 1Answers: 8,601 Site admin
    It looks like digest with Ajax is a little messy: http://stackoverflow.com/questions/5288150/digest-authentication-w-jquery-is-it-possible .

    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
  • thelothelo Posts: 5Questions: 0Answers: 0
    When I click on the table headers, the console shows "empty string passed to getElementByID()"
    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.
  • thelothelo Posts: 5Questions: 0Answers: 0
    UPDATE:

    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?
  • allanallan Posts: 54,880Questions: 1Answers: 8,601 Site admin
    I would suggest using fnCreatedRow to add custom attributes.

    What does your code for that currently look like - I don't see it here?

    Allan
  • thelothelo Posts: 5Questions: 0Answers: 0
    I was using the rowCallback code recommended in the forum link above. I'm still using the same code in the debug ucijuh from comment #1. If I change this function to fnCreatedRow then aData is undefined in firebug.

    [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]
This discussion has been closed.