Eu criei um formulário simples e estou usando o plug-in do Datatables jQuery para exibir alguns dados nele. Os dados estão sendo preenchidos por um script php (process.php) que retorna os resultados corretos no formato JSON. No formulário, há um botão que envia o valor da caixa de texto para o process.php.O problema é que não posso atualizar / alterar a tabela de dados com os novos dados recebidos pelo script process.php quando o botão é clicado.

O código do formulário:

<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 criar a tabela de dados, estou usando o seguinte 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>

O script process.php (funciona bem) é:

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