Wie aktualisiert man eine Tabelle mit jquery

Question

Ich suche über meine Frage online und fand diese am nächsten zu meiner Abfrage. How to refresh a div?

Aber ich bin immer noch nicht in der Lage, die Lösung meiner Abfrage zu finden. Meine Frage ist, habe ich unter Code

<h1>Time</h1> 
    <input type="text" value="0.0" id="time"> 
    <button id="FormSubmit">Submit</button> 
    <img src="loading.gif" id="LoadingImage" style="display:none" /> 
    <table id="responds" > 
     <tr> 
      <th>Time</th> 
     </tr> 
     <?php 
      $results = $mysqli->query("SELECT * FROM time ORDER BY time"); 
      //get all records from add_delete_record table 
      while($array = $results->fetch_assoc()) { 
     ?> 
      <tr id="item_<?php echo $array["id"] ?>"> 
        <td><?php echo $array['time']?> 
        <a href="#" class="del_button" id="del-<?php echo $array["id"] ?>"> 
         <img src="icon_del.gif" /> 
        </a> 
       </td> 
      </tr> 
     <?php } 
     ?> 
    </table> 

und ich möchte diese Tabelle erneut alle 30 Sekunden nachladen. Ich bin ziemlich naiv mit jquery und habe auch keine Skriptdatei, um Daten vom Server zu bekommen. Ich möchte aus anderen Gründen keinen Datenbankcode in andere Dateien schreiben. Wie kann ich das machen?

Im Folgenden finden Sie einen Code, der sich auf die Tabelle bezieht.

$("#FormSubmit").click(function (e) { 
       e.preventDefault(); 
       if($("#time").val()==='') { 
        alert("Please enter some text!"); 
        return false; 
       } 
       $("#FormSubmit").hide(); 
       $("#LoadingImage").show(); 

       var myData = 'content_txt='+ $("#time").val(); 
       jQuery.ajax({ 
        type: "POST", 
        url: "time.php", 
        dataType:"text", 
        data:myData, 
        success:function(response){ 
         $("#responds").append(response); 
         $("#contentText").val(''); 
         $("#FormSubmit").show(); 
         $("#LoadingImage").hide(); 

        }, 
        error:function (xhr, ajaxOptions, thrownError){ 
         $("#FormSubmit").show(); 
         $("#LoadingImage").hide(); 
         alert(thrownError); 
        } 
       }); 
      }); 

      $("body").on("click", "#responds .del_button", function(e) { 
       e.preventDefault(); 
       var clickedID = this.id.split('-'); 
       var DbNumberID = clickedID[1]; 
       var myData = 'recordToDelete='+ DbNumberID; 

       $('#item_'+DbNumberID).addClass("sel"); 
       $(this).hide(); 

       jQuery.ajax({ 
     type: "POST", 
     url: "time.php", 
     dataType:"text", 
     data:myData, 
     success:function(response){ 
         $('#item_'+DbNumberID).fadeOut(); 
     }, 
     error:function (xhr, ajaxOptions, thrownError){ 
         alert(thrownError); 
     } 
       }); 
      }); 

Answer 1

Sie kehren die time.php machen können eine JSON mit der Sammlung der Elemente in der Tabelle zurück:

// Append the following to time.php 
$data = array(); 
$results = $mysqli->query("SELECT * FROM time ORDER BY time"); 
//get all records from add_delete_record table 
while($array = $results->fetch_assoc()) { 
    $data[] = array('id' => $array['id'], 'time' => $array['time']); 
} 
echo json_encode($data); 

Dann dieses Skript, rufen:

jQuery.ajax({ 
    type: "POST", 
    url: "time.php", 
    dataType:"json", // INSTEAD OF text 
    data: { 
     content_txt: $("#time").val() 
    }, 
    success:function(response) { 
     var $table = $("#responds").html('<tr><th>Time</th></tr>'); // RESET THE TABLE 
     for(var i = 0; i < response.length; i++) { 
      // Append the new rows to the table, based on the data returned from the server 
      $table.append('<tr id="item_' + response[i].id + '>' + 
       '<td>' + response[i].time + '>' + 
        '<a href="#" class="del_button" id="del-' + response[i].id + '>' + 
         '<img src="icon_del.gif" />' + 
        '</a>' + 
       '</td>' + 
      '</tr>'); 
     } 
     // The following lines are commented-out because this runs in the background and only update the content of the table 
     // $("#contentText").val(''); 
     // $("#FormSubmit").show(); 
     // $("#LoadingImage").hide(); 
    }, 
    error:function (xhr, ajaxOptions, thrownError){ 
     $("#FormSubmit").show(); 
     $("#LoadingImage").hide(); 
     alert(thrownError); 
    } 
}); 

können Sie dieses Skript insi setzen de setInterval und es alle 30 Sekunden (Intervall ist in Millisekunden, so dass es 30000 sein sollte) laufen:

setInterval(function(){ 
    // The above code goes here 
}, 30000); 

Answer 2

Wenn Sie den Inhalt der Tabelle in einer separaten PHP-Datei speichern:

// tablebody.php 
    // 
    <tr> 
     <th>Time</th> 
    </tr> 
    <?php 
     $results = $mysqli->query("SELECT * FROM time ORDER BY time"); 
     //get all records from add_delete_record table 
     while($array = $results->fetch_assoc()) { 
    ?> 
     <tr id="item_<?php echo $array["id"] ?>"> 
       <td><?php echo $array['time']?> 
       <a href="#" class="del_button" id="del-<?php echo $array["id"] ?>"> 
        <img src="icon_del.gif" /> 
       </a> 
      </td> 
     </tr> 
    <?php } 
    ?> 

dann in der HTML-Datei dann jquery verwenden Sie können diese Datei in die Tabelle zu laden:

<table id="responds"> 
</table> 

<script> 
    $(document).ready(function() { 
     $("#responds").load("tablebody.php"); 
    }); 
</script> 

Sie müssen möglicherweise Ihren Code ein wenig umstrukturieren, um diese Methode effektiv zu verwenden, aber es wird Ihr Problem lösen.

Answer 3

Sie können die Ergebnisse Ihrer HTML-Tabelle mit AJAX aktualisiert werden, etwa so:

  $.ajax({ 
      type: "POST", 
      url: "controller.php", //php controller fecthing the info 
      data: { 
       param1: p1, 
       param2: p2   // controller params    
      },    
      success: function(data) {      
       if (data != null){ 
        $("#yourTableID").html(data); //update table html 
       }else{ 
        alert('No results found!'); 
       } 
      } 
      });