jquery comment actualiser la table sans actualiser la page?

J'ai créé une table avec l'aide du plugin de table de données de kendoGrid dans lequel j'effectue une suppression après que la table de suppression sholud soit rechargée et ne montre pas l'utilisateur supprimé mais la table ne recharge pas et montre toujours l'utilisateur dans la page les détails de l'utilisateur auront disparu, je suis fatigué le code suivant, mais il ne fonctionne pas Remarque: l'opération de suppression fonctionne correctementjquery comment actualiser la table sans actualiser la page?

<head> 
    <script> 
     $(function() { 
      $("#example").dataTable(); 
     }) 
    </script> 
    <script> 
     $(document).ready(function() { 
      $("#example").kendoGrid({dataSource: { 
        pageSize: 10 
       }, 
       editable: "popup", 
       sortable: true, 
       filterable: { 
        extra: false, 
        operators: { 
         string: { 
          contains: "Contains", 
          startswith: "Starts with" 
         } 
        } 
       }, 
       pageable: true, 
      }); 
     }); 
    </script> 

    <script> 
     function deleteuser(obj) { 
      var uid = obj.id; 
      var uname = obj.name; 
      if (confirm("This user '" + uname + "' maybe using some other events, Are you sure to delete this user?")) { 


       if (window.XMLHttpRequest) { 
        xmlhttp = new XMLHttpRequest(); 
       } else { 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
       } 

       xmlhttp.onreadystatechange = function() { 
        //alert(xmlhttp.responseText.trim()); 
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
         //alert(xmlhttp.responseText.trim()); 
         if (xmlhttp.responseText.trim() == 'deleted') { 
          alert('This user "' + uname + '" succesfully deleted'); 
$('#example').data('kendoGrid').dataSource.read(); 
         } else 
          alert('Error : user cannot deleted'); 

        } 
       } 
       var url = "deleteuser.php?id=" + uid; 
       xmlhttp.open("GET", url, true); 
       xmlhttp.send(); 

      } 
     } 
    </script> 
</head> 

<body> 
    <div> 
     <table id="example"> 
      <thead> 
       <tr> 
        <td>Action</td> 
        <td>Name</td> 
        <td>Username</td> 
        <td>Email</td> 
       </tr> 
      </thead> 
      <tbody> 
       <?php 
       $sql = "SELECT * from registration"; 
       $result = $conn->query($sql); 
       while ($row = $result->fetch_assoc()) { 
        ?> 
        <tr> 
         <td><button class="btn btn-danger btn-xs" id="<?php echo $row['user_id'] ?>" onClick="deleteuser(this);" name="<?php echo $row['first_name'] ?>" title="Delete"><i class="fa fa-trash-o"></i></button></td> 
         <td><?php echo $row['first_name'] ?></td> 
         <td><?php echo $row['user_name'] ?></td> 
         <td><?php echo $row['email'] ?></td> 

         <?php 
        } 
        ?> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</body>

deleteuser.php

<?php 
    session_start(); 
    $id = $_GET['id']; 
    include("../model/functions.php"); 
    $table = "registration"; 
    $condition = "user_id=" . $id . ""; 
    $delete = Deletedata($table, $condition); 

    if ($delete === TRUE) { 
     echo'deleted'; 
    } else { 
     echo 'not deleted'; 
    } 
?>

Source

2016-04-12 Arun Kumaresh

Vous n'utilisez une source de données avec votre grille Kendo, donc il n'y a rien à rafraîchir. – whipdancer

Vous ne pouvez pas mettre à jour les données de la table telles quelles, car vous n'avez pas défini l'endroit où la table reçoit les données. Le peut soit rafraîchir la page entière, ou créer un datasource avec un transport & url que vous pouvez utiliser pour obtenir les données.

Lorsque vous remplissez le côté serveur de table:

<tbody> 
    <?php 
    $sql = "SELECT * from registration"; 
    $result = $conn->query($sql); 
    while ($row = $result->fetch_assoc()) { 
     ?> 
     <tr> 
      <td><button class="btn btn-danger btn-xs" id="<?php echo $row['user_id'] ?>" onClick="deleteuser(this);" name="<?php echo $row['first_name'] ?>" title="Delete"><i class="fa fa-trash-o"></i></button></td> 
      <td><?php echo $row['first_name'] ?></td> 
      <td><?php echo $row['user_name'] ?></td> 
      <td><?php echo $row['email'] ?></td> 

      <?php 
     } 
     ?> 
    </tr> 
</tbody>

Il n'y a rien pour la table à rafraîchir.

Vous devez ajouter une source de données pour la table pour obtenir les données.

Habituellement, je définis la source de données de la grille séparément de la définition de la grille elle-même.

À titre d'exemple:

var gridDataSource = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url: "someurl/to/my/data" 
     } 
    }, 
    schema: { 
     model: { id: "user_id" } 
    } 
});

Ensuite, vous pouvez définir votre table quelque chose comme ceci:

var jgrid = $("#example").kendoGrid({ 
    columns: [ 
     { 
      field: "first_name", 
      title: "First Name" 
     }, 
     { 
      field: "user_name", 
      title: "User Name", 
     }, 
     { 
      field: "email", 
      title: "Email" 
     } 
    ], 
    dataSource: gridDataSource 
}).data("kendoGrid");

Source

2016-04-13 13:53:21 whipdancer

$('#GridName').data('kendoGrid').dataSource.read(); 
$('#GridName').data('kendoGrid').refresh();

Source

2016-04-12 10:35:03

l'ont essayé mais ne fonctionne pas –

jquery comment actualiser la table sans actualiser la page?

Répondre

Questions connexes