Aktualizacja danych (JQuery) po kliknięciu przycisku

Question

Utworzono prosty formularz i używam wtyczki jQuery Datatables, aby wyświetlić niektóre dane w nim. 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 process.php. Problem polega na tym, że nie mogę aktualizować/zmieniać datatable z nowymi danymi otrzymanymi przez skrypt process.php po kliknięciu przycisku.

kod w postaci:

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

Aby utworzyć DataTable, używam następujący kod 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(); 
       } 
      }); 
     }); 
    }); 

skrypt process.php (działa poprawnie) to:

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

Answer 1

Wygląda na to, że powinieneś również podać fnServerData podczas konfiguracji swojego zbioru danych, jeśli chcesz używać ajax POST: http://datatables.net/ref#fnServerData

Jest również możliwe, że nie trzeba dzwonić pod numer fnReloadAjax(), ale tylko fnDraw(). fnReloadAjax() jest funkcją wtyczki, więc zakładam, że wcześniej ją wczytałeś.

Answer 2

fnReloadAjax jest tym, czego powinieneś używać (i uważam, że może mieć przerysowanie wbudowane w funkcję). Problem polega jednak na tym, że pomimo tego, że wykonujesz drugie wywołanie .ajax, dane w tym wywołaniu nie są w ogóle powiązane z twoimi datatable i nigdy nie będą z nimi związane.

Użycie fnReloadAjax wykona to samo wywołanie Ajax, określone w inicjalizacji tabeli. Potrzebne jest, jak wspomniał Stefan, określenie parametru fnServerData w ustawieniach datowalnych (ale wyrzucenie parametrów Success, ponieważ coś wzdłuż tych linii jest już uwzględnione w datatables). Następnie wystarczy zadzwonić pod numer fnReloadAjax().

Oto co twój ostateczny kod powinien wyglądać następująco:

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

W końcu znalazłem rozwiązanie! Były 2 problemy w moim kod jQuery:

1. musiałem dodać fnReloadAjax() kod po tagach, które ładują DataTables i przed $ (document) .ready() oświadczenie skryptów.
2. Musiałem zmienić kod JQuery mojego przycisku przesyłania (nie trzeba wywoływać AJAX, konieczne jest tylko fnReloadAjax()).

Dziękuję zarówno Stefan & mbeasley !!

kod jQuery jest teraz:

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

Mogłeś alternatywnie po prostu zniszczyć tabelę i utwórz ją też.

var oTable = null; 

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

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

reloadTable();