Zaktualizuj dane (JQuery) po kliknięciu przycisku
Utworzyłem prosty formularz i używam wtyczki jQuery Datatables, aby wyświetlić w nim niektóre dane. Dane są zapełniane przez skrypt php (process.php), który zwraca prawidłowe wyniki w formacie JSON. W formularzu znajduje się przycisk, który wysyła wartość pola tekstowego do procesu.php.Problem polega na tym, że nie mogę zaktualizować / zmienić danych za pomocą nowych danych otrzymanych przez skrypt process.php po kliknięciu przycisku.
Kod formularza:
<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>
Aby utworzyć datatable, używam następującego kodu 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>
skrypt process.php (działa dobrze) to:
<code><?php $result=""; if (empty($_REQUEST["txtId"])) { $result = '{"aaData":[["1","Surname1","Name1"]]}'; } else { $result = '{"aaData":[["2","Surname2","Name2"]]}'; } print $result; ?> </code>