jquery如何刷新表而不刷新頁面？

我在kendoGrid數據表插件的幫助下創建了一個表，在刪除表sholud得到重裝後執行刪除，並且不顯示已刪除的用戶，但表沒有重新加載，並且當我刷新時仍然在表中顯示用戶頁面的用戶詳細信息將會消失我已經厭倦了下面的代碼，但它不工作注意：刪除操作是否正常工作jquery如何刷新表而不刷新頁面？

<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'; 
    } 
?>

來源

2016-04-12 Arun Kumaresh

你不使用你的劍道網格數據源，所以沒有什麼刷新。 – whipdancer

您無法按原樣更新表格數據，因爲您尚未定義表格獲取數據的位置。可以刷新整個頁面，也可以使用可用於獲取數據的transport & url創建一個datasource。

當填充表服務器端：

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

沒有什麼對錶進行刷新。

您需要爲該表添加數據來源以獲取數據。

通常，我定義與網格定義本身分開的網格數據源。

舉個例子：

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

然後，你可以定義你的表是這樣的：

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");

來源

2016-04-13 13:53:21 whipdancer

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

來源

2016-04-12 10:35:03

已經嘗試過，但沒有工作 –

jquery如何刷新表而不刷新頁面？

回答

相關問題