Dati di aggiornamento (JQuery) quando si fa clic sul pulsante

Question

Ho creato un modulo semplice e sto utilizzando il plug-in jQuery di Datatables per visualizzare alcuni dati al suo interno. I dati vengono popolati da uno script php (process.php) che restituisce i risultati corretti nel formato JSON. Nel modulo, c'è un pulsante che invia il valore della casella di testo al process.php. Il problema è che non riesco ad aggiornare/modificare datatable con i nuovi dati ricevuti dallo script process.php quando si fa clic sul pulsante.

Il codice del modulo:

<form name="myform" id="myform" action="" method="POST"> 
    <label for="id">Enter an id:</label> 
    <input type="text" name="txtId" id="txtId" value=""/> 
    <input type="button" id="btnSubmit" name="btnSubmit" value="Search"> 
</form> 

<div id="results"> 
    <table class="display" id="example"> 
     <thead> 
      <tr> 
       <th>id</th> 
       <th>Surname</th> 
       <th>Name</th> 
      </tr> 
     </thead> 
     <tbody> 
      <!-- data goes here --> 
     </tbody> 
    </table> 
</div> 

Per creare DataTable, sto utilizzando il seguente codice JQuery:

$(document).ready(function() { 
      var oTable = $('#example').dataTable({ 
       "sPaginationType": "full_numbers", 
       "iDisplayLength": 10, 
       //"bServerSide": true, 
       "sAjaxSource": "process.php" 
      }); 

     $("#btnSubmit").click(function(){ 
      $.ajax({ 
       type: "POST", 
       url: "process.php", 
       data: 'txtId=' + $("txtId").val(), 
       success: function(result) { 
        oTable.fnReloadAjax(); 
        oTable.fnDraw(); 
       } 
      }); 
     }); 
    }); 

sceneggiatura process.php (funziona bene) è:

<?php 
$result=""; 
if (empty($_REQUEST["txtId"])) {  
    $result = '{"aaData":[["1","Surname1","Name1"]]}'; 
} 
else { 
    $result = '{"aaData":[["2","Surname2","Name2"]]}'; 
} 
print $result; 
?> 

Answer 1

Sembra che si dovrebbe specificare fnServerData quando si imposta il datable, se si desidera utilizzare ajax POST: http://datatables.net/ref#fnServerData

È anche possibile che non sia necessario chiamare fnReloadAjax(), ma solo fnDraw(). fnReloadAjax() è una funzione plugin, quindi presumo che l'abbia precedentemente caricata.

Answer 2

fnReloadAjax è quello che dovresti usare (e credo che potrebbe avere un ridisegno incorporato nella funzione). Ma il problema è che, sebbene tu faccia una seconda chiamata .ajax, i dati in quella chiamata non sono associati al tuo datatable e non saranno mai associati ad essa.

L'utilizzo di fnReloadAjax eseguirà la stessa chiamata Ajax specificata nell'inizializzazione della tabella. Quindi quello che ti serve, come ha detto Stefan, è specificare il tuo parametro fnServerData nelle tue impostazioni datatable (ma trash i parametri Success, perché qualcosa lungo quelle linee è già assunto dai datatables). Quindi basta fare il pulsante chiama fnReloadAjax().

Ecco ciò che il codice finale dovrebbe essere simile:

$(document).ready(function() { 
     var oTable = $('#example').dataTable({ 
      "sPaginationType": "full_numbers", 
      "iDisplayLength": 10, 
      "sAjaxSource": "process.php", 
      "fnServerData": function (sSource, aoData, fnCallback) { 
       $.ajax({ 
        "dataType": 'json', 
        "type": "POST", 
        "url": sSource, 
        "data": 'txtId=' + $("txtId").val(), 
        "success": fnCallback 
       }); 
      } 
     }); 

    $("#btnSubmit").click(function(){ 
     oTable.fnReloadAjax(); 
    }); 
}); 

Answer 3

Alla fine, ho trovato la soluzione! C'erano 2 problemi nel mio codice JQuery:

1. ho dovuto aggiungere la) Codice (fnReloadAjax dopo i tag script che carico DataTable e prima della .ready $ (document) economico().
2. Ho dovuto modificare il codice JQuery del mio pulsante di invio (non è necessario per una chiamata AJAX, solo fnReloadAjax() è necessario).

Grazie a entrambi Stefan & mbeasley !!

codice jQuery ora è:

// 
// fnReloadAjax() code  
// 
    $.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) 
    { 
     if (typeof sNewSource != 'undefined' && sNewSource != null) 
     { 
      oSettings.sAjaxSource = sNewSource; 
     } 
     this.oApi._fnProcessingDisplay(oSettings, true); 
     var that = this; 
     var iStart = oSettings._iDisplayStart; 
     var aData = []; 

     this.oApi._fnServerParams(oSettings, aData); 

     oSettings.fnServerData(oSettings.sAjaxSource, aData, function(json) { 
      /* Clear the old information from the table */ 
      that.oApi._fnClearTable(oSettings); 

      /* Got the data - add it to the table */ 
      var aData = (oSettings.sAjaxDataProp !== "") ? 
       that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json; 

      for (var i=0 ; i<aData.length ; i++) 
      { 
       that.oApi._fnAddData(oSettings, aData[i]); 
      } 

      oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); 
      that.fnDraw(); 

      if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) 
      { 
       oSettings._iDisplayStart = iStart; 
       that.fnDraw(false); 
      } 

      that.oApi._fnProcessingDisplay(oSettings, false); 

      /* Callback user function - for event handlers etc */ 
      if (typeof fnCallback == 'function' && fnCallback != null) 
      { 
       fnCallback(oSettings); 
      } 
     }, oSettings); 
    } 


    $(document).ready(function() { 

     var oTable = $('#example').dataTable({ 
      "sPaginationType": "full_numbers", 
      "iDisplayLength": 10, 
      //"bServerSide": true, 
      "sAjaxSource": "process.php" 
     }); 

     $("#btnSubmit").click(function(){ 
      oTable.fnReloadAjax("process.php?txtId=" + $("txtId").val()); 
     }); 

    }); 

Answer 4

Si potrebbe in alternativa, solo distruggere il tavolo e ricrearlo troppo.

var oTable = null; 

function reloadTable() { 
    if (oTable) { 
     oTable.fnDestroy(); 
    } 

    oTable = $('#example').dataTable({ 
     "sPaginationType": "full_numbers", 
     "iDisplayLength": 10, 
     //"bServerSide": true, 
     "sAjaxSource": "process.php" 
    }); 
} 

reloadTable();