json - 在对行执行删除操作后使用 table.ajax.reload() 时，表不会刷新

Question

我有一个表正在以这种形式打印数据，

var table; 
  // DATA TABLE!!!
function show_assigned_table()
{
  $.ajax({
      url: "action.php", 
      type: "POST", 
      data: {action:"view_assigned_course_table"}, 
      dataType: 'json', 
    success: function(data)
    {
      console.log(data);
      table = $('#assign_table').DataTable({
        "bDestroy": true,
        data: data, 
        columns: [
        {'data': 'course_name'},
        {'data': 'teacher_name'},
        {'data': 'grade_name'},
        {'render': function(data, type, row, meta){
                    return '<a id="replace_teacher' + meta.row + '" data-value = ' + row.taught_id +
                            ' class="btn btn-outline-warning btn-sm" href="">Replace</a>&nbsp;&nbsp;<a id="remove_teacher' +
                            meta.row + '" data-value = ' +
                            row.taught_id + ' class="btn btn-outline-danger btn-sm" href="">Delete</a>';
        }},
        
        ]
      });

    },
    error: function(e)
    {
      alert("no");
    }
  });
}

现在，我为“替换”和“删除”按钮提供了另一个功能。删除按钮的功能如下，

 $(document).on("click", "[id^=remove_teacher]", function(e){
    var id = $(this).data('value');
    e.preventDefault(); 
    $.ajax({
      url: "action.php", 
      type: "POST", 
      data:{action: "Remove_Assigned_Teacher", id: id}, 
      success:function(response)
      {
        response = response.trim(); 
        console.log(response);
        if (response == 'ok')
        {  
          alert("Teacher has been removed from the course successfully!"); 
          $("#assign_table").DataTable().ajax.reload(); 
        }
          
        else 
          alert("Error occured"); 
      }
        
      });
    });

这个函数运行良好，除了一件事之外，每当删除一行时，它不会刷新表格...要刷新表格，我必须刷新整个页面。我想要的只是每当删除事件发生时刷新该表。

我为此使用了 ajax.reload() 函数，但它不起作用，因为它显然没有在刷新时收到 JSON 数据(现在我尝试搜索它，但找不到任何我可以正确处理的东西明白。我确实找到了将数组转换为 JSON 的代码，但不知道如何在我的代码中实现它。我对此还很陌生)。

我还尝试使用 destroy 函数，然后再次创建表格，这有效，但它破坏了表格的所有属性(如表格边框、搜索栏等。表格的外观发生了变化)

Answer 1

您的问题在这一行:

$("#assign_table").DataTable().ajax.reload()

您的数据表没有ajax option ，因此您会在控制台中收到错误:

jquery.dataTables.min.js:50 Uncaught TypeError: Cannot set property 'data' of null

因为你控制数据表客户端，使用jquery ajax，所以需要使用datatable row remove()为了删除一行，即:

$('#assign_table').DataTable().row( $(this).closest('tr')).node().remove()

如果您希望控制服务器端的所有内容，您需要使用数据表 ajax 选项并稍微更改一下软件的逻辑。在这种情况下，我建议您查看 Removing rows with ajax Data

var data = [
    {
        "taught_id": "11",
        "course_name": "English",
        "grade_name": "2",
        "section_name": "A",
        "teacher_name": "Ali Khalil"
    },
    {
        "taught_id": "6",
        "course_name": "Science",
        "grade_name": "2",
        "section_name": "A",
        "teacher_name": "Talha Ayub"
    },
    {
        "taught_id": "8",
        "course_name": "Science",
        "grade_name": "7",
        "section_name": "A",
        "teacher_name": "Talha Ayub"
    }
];
function show_assigned_table() {
    /*
     $.ajax({
     url: "http://localhost:63342/StackOverflow/1.json",
     type: "POST",
     data: {action:"view_assigned_course_table"},
     dataType: 'json',
     success: function(data) {
     */
    $('#assign_table').dataTable({
        data: data,
        columns: [
            {'data': 'course_name'},
            {'data': 'teacher_name'},
            {'data': 'grade_name'},
            {
                'render': function (data, type, row, meta) {
                    return '<a id="replace_teacher' + meta.row + '" data-value = ' + row.taught_id +
                            ' class="btn btn-outline-warning btn-sm" href="">Replace</a>&nbsp;&nbsp;<a id="remove_teacher' +
                            meta.row + '" data-value = ' +
                            row.taught_id + ' class="btn btn-outline-danger btn-sm" href="">Delete</a>';
                }
            }
        ]
    });
    /*
     },
     error: function(e) {
     alert("no");
     }
     })
     */
}
$(document).on("click", "[id^=remove_teacher]", function (e) {
    var response = {
        "data": "ok"
    };
    e.preventDefault();
    var crow = $('#assign_table').DataTable().row( $(this).closest('tr')).node();
    var id = $(this).data('value');
    console.log('taught_id --> ' + id);
    //$.ajax({
        //url: "http://localhost:63342/StackOverflow/2.json",
        //type: "POST",
        //data: {action: "Remove_Assigned_Teacher", id: id},
        //success: function (response) {
            response = response.data.trim();
            console.log(response);
            if (response == 'ok') {
                //alert("Teacher has been removed from the course successfully!");
                crow.remove();
            }
            else
                alert("Error occured");
        //}
    //});

});
show_assigned_table();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdbda2bdbda8bfe3a7be8dfce3fcfbe3fd" rel="noreferrer noopener nofollow">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

<table id="assign_table" class="display" style="width:100%">
    <tbody>
    </tbody>
</table>