Problem creating 2 DataTables in different JSPs, when trying to recover the first one ('Back' butn).

Oromar

Hi everybody,

I've got 2 JSPs with 1 Datatable each one. Every Datatable is working fine and I'm getting all my data correctly and without errors. This is my FIRST DataTable initialization, inside a 'createDatatable' function:

$('#datatableRegister').dataTable( {
    "bServerSide": true,
    "bProcessing": true,
    "sAjaxSource": "myServlet",
    "bDestroy": true,
    "fnServerData": function (sSource, aoData, fnCallback ){
        aoData.push( { "name": "OP", "value": "BRC" } );
        $.ajax({
             'dataType': 'json',
             'type': 'GET',
             'url': sSource,
             'data': aoData,
             'success': function (code){
                 checkFirstReturn(code.iTotalRecords);
                 fnCallback(code);
        }});                
     },
    "bFilter": false,
    "bPaginate": false,
    "paging":   false,
    "scrollY": 200,
    "scrollX": true,
    "responsive": true,
    "oLanguage": {
                  "sProcessing": "Processing ...",
                  "infoFiltered": null,
                  "infoPostFix": null
    }, 
    "aoColumnDefs": [ { "sClass": "text-wrap", "aTargets": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ] } ],
    "aoColumns": [

              { "mDataProp": "id", "bVisible": true},
              { "mDataProp": "origin", "bVisible": true},
              { "mDataProp": "code", "bVisible": true},
              ],                     
    "sScrollX": "100%",
    "sScrollY": "318px"
});

This JSP has a 'Seach' button that will call at** fnDraw()** . This is working fine too:

$("#SearchButton").on("click", function(){
$('#datatableRegister').DataTable().fnDraw();
});

From this JSP I'm calling a window.load(....) event to load the second JSP. This second JSP has another DataTable initialization, very similar to the first one:

    $('#datatableRegisterDetails').dataTable( {
        "bServerSide": true,
        "bProcessing": true,
        "sAjaxSource": "MyServlet",
        "fnServerData" : function(sSource, aoData, fnCallback ){
                aoData.push( { "name": "OP", "value": "CDR" } );
                aoData.push( { "name": "ID", "value": $('#ID').val()  } );
             $.ajax({
             'dataType': 'json',
             'type': 'GET',
             'url': sSource,
             'data': aoData,
             'success': function (code){
                 $('#try').val(code.TRY);
                 checkSend(code.iTotalRecords);
                 $('#NUMTOTALLINES').val(code.iTotalRecords);
                 fnCallback(code);
             }});
         },
        "bFilter": false,
        "bPaginate": false,
        "paging":   false,
        "scrollY": 200,
        "scrollX": true,
        "responsive": true,
        "oLanguage": {
                      "sProcessing": "Processing ...",
                      "infoFiltered": null,
                      "infoPostFix": null
        }, 
        "aoColumnDefs": [ { "sClass": "text-wrap", "aTargets": [ 0, 1, 2] } ],
        "aoColumns": [  
                  { "mDataProp": "line", "bVisible": true},
                  { "mDataProp": "error", "bVisible": true},
                  { "mDataProp": "desc", "bVisible": true},                   
                  ],                     
        "sScrollX": "100%",
        "sScrollY": "290px"
});

This second JSP has a Back button like this:

$("#BackButton").on("click", function(){
// Closing
$('#SecondJSPDiv').parent().slideUp();
}

The problem: When I click ont 'Back' button, I see again the first one, that's ok. But if I click on the 'Seach' button again, the servlet is not called and a 'new' datatable is created. I guess is because I have to initialize the datatable again, but if I do that calling the 'createDatatable()' function again, is drawn on top of the other. I tried also destroying the first dataTable with fnDestroy but it's not working. Any ideas please? Thx!