He creado un formulario simple y estoy usando el complemento Datatables jQuery para mostrar algunos datos en él. Los datos están siendo rellenados por un script php (process.php) que devuelve los resultados correctos 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 los datos con los nuevos datos recibidos por el script process.php cuando se hace clic en el botón.

El código del formulario:

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

Para crear el datatable, estoy usando el siguiente código JQuery:

<code>    $(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();
                }  
            });
        });
    } );
</code>

El script process.php (funciona bien) es:

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