Javascript 服务器端表使用JS、Php或Ajax从表（而不是数据库）中删除行

项目链接：

以下代码正确删除表中的一行：

  $('#example').on('click', '.delete_btn', function () {
      var row = $(this).closest('tr');
      var data = table.row( row ).data().delete;
      console.log(data);
      alert("delete_btn clicked");
      row.remove();
    });

但是，它不是永久删除该行。如果刷新页面，则“已删除”的行仍然存在。我相信这是因为我没有从数据库中删除该行。通常，在php中，您可以通过以下方式安全地删除数据库中的一行：

id = mysqli_real_escape_string($con, $_GET['del']);
$stmt = $con->prepare("DELETE FROM employees WHERE id = ? LIMIT 1"); 
$stmt->bind_param('i', $id);
$stmt->execute(); 
$stmt->close();
header('location: index.php');

编辑：修订的代码索引。php:

  (document).ready(function() {
var asc = true;
var table = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "server.php",
"type": "POST",
},

//http://live.datatables.net/xijecupo/1/edit
columnDefs: [{
targets: -1,
defaultContent: '<button type="button" class="delete_btn">Delete</button>'
}],
rowGroup: {
dataSrc: 1
}
});

$(function(){
    $(document).on('click','.delete_btn',function(){

        var del_id= $(this).closest('tr');
        var ele = $(this).parent().parent();  //removed the "$" from the ele variable. It's a js variable.
        console.log(del_id);

        $.ajax({
            type:'POST',
            url:'delete.php',
            dataType: 'json', //This says I'm expecting a response that is json encoded.
            data: { 'del_id' : del_id}, 

            success: function(data){ //data is an json encoded array.

              console.log('Data: ' + data); //Going to display whats in data so you can see whats going on.

              if(data['success']){  //You are checking for true/false not yes or no.
                console.log('You successfully deleted the row.');
                alert("delete btn clicked");
                ele.remove();
              }else{
                console.log('The row was not deleted.');
                }

             }

            });
        });
}); //http://jsfiddle.net/zfohLL0a/

}); //end doc ready

$del_id = $_POST['del_id']; 
$stmt = $conn->prepare("DELETE FROM employees WHERE id = ?"); //LIMIT 1
$stmt->bind_param('i', $del_id);
$confirmDelete = $stmt->execute();

$array['success'] = FALSE; //Initialize the success parameter as false.
if($confirmDelete){ //Check to see if there was an affected row.
  $array['success'] = TRUE;
}

echo json_encode($array);
?>

部分解决方案：您必须首先使用datatables.net“ajax”：原始server.php的方法。但是，在这之后，您将对add.php、delete.php等使用普通的$.ajax方法。这是令人困惑的，因为您对ajax使用了两种不同的语法。最简单的方法就是查看示例链接

---

讨论向ajax/json发送信息和从ajax/json发送信息的另一个有用链接是使用最新更新的代码更新的答案。

JS

$(function(){
    $(document).on('click','.delete_btn',function(){

        var del_id= $(this).closest('tr');
        var ele = $(this).parent().parent();  //removed the "$" from the ele variable. It's a js variable.
        console.log(del_id);

        $.ajax({
            type:'POST',
            url:'delete.php',
            dataType: 'json', //This says I'm expecting a response that is json encoded.
            data: {  //Set up your post data as an array of key value pairs.

              'del_id' : del_id

            }, 

            success: function(data){ //data is an json encoded array.

              console.log('Data: ' + data); //Going to display whats in data so you can see whats going on.

              if(data['success']){  //You are checking for true/false not yes or no.
                console.log('You successfully deleted the row.');
                ele.fadeOut().remove();
              }else{
                console.log('The row was not deleted.');
                }

             }

            });
        });
});

delete.php

$del_id = $_POST['del_id']; 
$stmt = $con->prepare("DELETE FROM employees WHERE id = ?"); //LIMIT 1
$stmt->bind_param('i', $del_id);
$confirmDelete = $stmt->execute();

$array['success'] = FALSE; //Initialize the success parameter as false.
if($confirmDelete){ //Check to see if there was an affected row.
  $array['success'] = TRUE;
}

echo json_encode($array); //Your ajax is setup to expect a json response.  
//json_encode the $array and echo it out.  You have to do this.  
//When you "echo" out a value, that is what the server is going to submit back to the ajax function.
//If you do not do this, the ajax script will not recieve a response from the delete.php page.

---

这段代码应该适用于您。

除了Joesph的回答之外，Joesph的回答非常有帮助：

控制台显示“Uncaught RangeError:超出最大调用堆栈大小”。看起来好像没有发出Ajax调用（网络选项卡上没有显示任何内容）-因此在创建请求时必须如此。我怀疑我可能需要JSON.stringify您的del_id

有人建议： “主堆栈问题是由var edit_id=$（this）.closest（'tr'）；）引起的。您尝试将整个jQuery对象作为数据在ajax中发送。然后jQuery无法在内部序列化它并抛出一个匹配

您可能希望发送该行中的某些属性，如ID或数据属性（不清楚期望值）。”

---

如果您有任何建议，请张贴。我将很快在任何最终的代码解决方案中进行编辑。

您需要使用ajax将数据发送到服务器，让它知道如何从数据库中删除数据。服务器不知道您只从浏览器内部删除了一些内容。学习一些ajax教程应该会有所帮助。我会的。当你在线的时候。。。我假设最终结果会像这样。ajax（{url:'remove.php'，type:'POST'，data:{id:deleteid}，success:function（response）{//从HTML表$（el.nest（'tr'）.css（'background'，'tomato'）；$（el.nest（'tr'）.fadeOut（800，function（）{$（this））中删除行）.remove（）；}）；}）；是，除非您正在使用与数据的方法或对象键不匹配的

$\u GET['del']

显示感谢您提供的信息。我会仔细阅读你的帖子和这段youtube视频。并将试用您的代码。一天左右可能会有问题。谢谢。嘿，没问题。。关于jquery/ajax有很多信息。我发现最好只是让一个简单的ajax请求开始工作，然后在以后添加您需要的东西。无论如何，干杯！愚蠢的问题。。。这是我的ajax代码（目前有效）。var table=$（'#示例'）.DataTable（{“processing”：true，“serverSide”：true，“ajax”：{“url”：“server.php”，“type”：“POST”，}，“ajax”：与$.ajax（{此ajax格式使用“ajax”：而不是$.ajax（{区别在于您正在使用某种名为DataTable的类。DataTable有一个ajax“方法”）内置。您告诉dataTable类“使用”ajax。在ajax方法中，您提供了一个url和类型。$。如果您要在dataTable类之外为自己的自定义函数编写自己的ajax属性，那么ajax将是有用的。这有帮助吗？