Append server side data from Ajax call without loosing previous data

MuktalMhx

Hi everyone,

I am using Datatable with Ajax call for fetch SOAP response from server side. In every response SOAP API just provide 10 records. It working fine. but condition is that in the same response I am getting a FLAG parameter. If FLAG is "Y" then it means there are more data in SOAP response. So I have to pass an unique key within the same Ajax call and fetch the data from response. This is also working for me. But main thing is that I have to append the second request data with previous data.
In this current scenario if I load second time data then previous one is disappear.

Please suggest how to keep first time record and append second or third time records in same datatable.

\\\ <table id="example" style="width:100%">
        <thead >
           <tr>
                <th>Header1</th>
                <th>Header2</th>
                <th>Header3</th>
                <th>Header4</th>
            </tr>
        </thead>                
    </table>

<input type = "button" id="customerSearchButton" value = "DisplayTable"/>
<input type = "button" id="nextRec" value = "ShowNextRecord" onClick="callTable();" style="display:none;"/>

<script type="text/javascript">
$("#customerSearchButton").on("click", function (event) {
var unbilledArray = new Array();
    $.ajax({
        url : "unbilledtxn",
        type : "Post",
        data : {NextRecordKey: NextRecordKey},
        dataType : "json",
        success : function(response) {      
         $.each(response, function (i1, v1) {       
        var MoreIndicationFlag = JSON.stringify(v1.unSettledmoreIndFlag);
        var NextRecordKey = JSON.stringify(v1.unSettlednextRecordKey);
        
        if(MoreIndicationFlag === '"Y"'){
        document.getElementById("nextRec").style.display="block";
        } else {
        document.getElementById("nextRec").style.display="none";
        }
            
           $("#example").dataTable().fnDestroy(); 
            
            var table = $('#example').DataTable({
                "aaData" : v1.unbilledTxnInqLst,
                "aoColumns" : [ 
                    
                    {"mData" : "data1"},
                    {"mData" : "data2"},
                    {"mData" : "data3"},
                    {"mData" : "data4"}             
                    ],

                 }); 
             });
        },
        error : function(data) { 
                alert("Unable to process request...");
        }

    });
});
</script> 

<script>
function callTable(){
$("#customerSearchButton").click();
}
</script>  

///

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

You've got the DataTables initialisation within the Ajax succeess callback. This is fine, but every time that's called, you'll lose the old data, as you said.

The key would be to not re-initialise the table after the first time, but to use rows.add() to add the new data. You could call $.fn.dataTable.isDataTable() to see if the data has been initialised, and fork the code based on that.

Colin