Actualizar tablas de datos (JQuery) cuando se hace clic en el botón

Question

He creado un formulario simple y estoy usando el plugin jQuery de Datatables para mostrar algunos datos en él. Los datos se completan con una secuencia de comandos php (process.php) que devuelve los resultados adecuados en formato JSON. En el formulario, hay un botón que envía el valor del cuadro de texto a process.php. El problema es que no puedo actualizar/modificar datatable con los nuevos datos recibidos por el script process.php cuando se hace clic en el botón.

El código del formulario:

<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> 

Para crear la tabla de datos, estoy usando el siguiente código de 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(); 
       } 
      }); 
     }); 
    }); 

guión process.php (funciona bien) es:

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

Answer 1

Parece que también debe especificar fnServerData cuando configura su datable, si desea utilizar ajax POST: http://datatables.net/ref#fnServerData

También es posible que no necesite llamar al fnReloadAjax(), sino solo al fnDraw(). fnReloadAjax() es una función de complemento, así que supongo que la cargó previamente.

Answer 2

fnReloadAjax es lo que debe usar (y creo que podría tener un redibujado integrado en la función). Pero el problema es que, aunque realice una segunda llamada .ajax, los datos de esa llamada no están asociados a su tabla de datos y nunca estarán vinculados a ella.

El uso de fnReloadAjax hará la misma llamada Ajax que especificó en la inicialización de su tabla. Entonces, lo que necesita, como mencionó Stefan, es especificar su parámetro fnServerData en su configuración de tablas de datos (pero eliminar los parámetros Success, porque algo en esas líneas ya lo asumen las tablas de datos). Luego solo haga que su botón llame al fnReloadAjax().

Esto es lo que el código final debe ser similar:

$(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

Por fin, he encontrado la solución! Hubo 2 problemas en mi código de jQuery:

1. he tenido que añadir el() Código fnReloadAjax después de las etiquetas de secuencia de comandos que se cargan tablas de datos y antes de la ready $ (document) declaración().
2. Tuve que modificar el código de JQuery de mi botón de envío (no es necesario llamar a AJAX, solo es necesario fnReloadAjax()).

Gracias a los dos Stefan & mbeasley !!

código jQuery ahora es:

// 
// 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

Se podría, alternativamente, simplemente destruir la mesa y volver a crearlo también.

var oTable = null; 

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

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

reloadTable();