基于Json/Ajax的服务端DataTable示例可运行，但CRUD按钮失效

嘿，我懂你现在的纠结——之前不用DataTables插件时CRUD按钮玩得顺风顺水，换成服务端模式的DataTables之后反而卡壳了对吧？别着急，咱们一步步把这个问题捋清楚，把编辑、删除按钮给加上去。

核心问题所在 #

服务端模式下的DataTables是动态渲染表格内容的（分页、搜索、排序后都会重新加载数据），所以不能像静态表格那样直接写死按钮，得通过DataTables的列配置来动态生成操作按钮，同时还要用事件委托来绑定点击事件，不然新加载的行里的按钮会失效。

具体实现步骤 #

1. 在DataTables初始化中添加操作列

首先修改你的初始化代码，加上columns配置，专门留一列用来放编辑和删除按钮。这里用render函数来动态生成按钮：

$(document).ready(function() {
  var table = $('#example').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
      "url": "server.php",
      "type": "POST"
    },
    // 新增列配置，这里假设你的后台返回的字段有id、name、email等
    "columns": [
      { "data": "id" },
      { "data": "name" },
      { "data": "email" },
      // 操作列，动态生成按钮
      { 
        "data": null,
        "render": function(data, type, row) {
          // row参数就是当前行的完整数据，可以拿到row.id
          return `
            <button class="btn btn-sm btn-primary edit-btn" data-id="${row.id}">编辑</button>
            <button class="btn btn-sm btn-danger delete-btn" data-id="${row.id}">删除</button>
          `;
        },
        "orderable": false, // 这一列不需要排序
        "searchable": false // 这一列不需要被搜索
      }
    ]
  });
});

2. 用事件委托绑定按钮点击事件

因为表格内容是动态加载的，直接用$('.edit-btn').click()绑定的话，新分页出来的按钮会没效果，所以要用事件委托：

// 编辑按钮点击事件
$(document).on('click', '.edit-btn', function() {
  var rowId = $(this).data('id');
  // 这里可以弹出模态框，通过Ajax获取该条数据的详情，填充到表单里
  $.ajax({
    url: 'edit.php',
    type: 'POST',
    data: {id: rowId},
    success: function(response) {
      // 假设返回的是JSON数据，填充到模态框的表单中
      var data = JSON.parse(response);
      $('#editModal #name').val(data.name);
      $('#editModal #email').val(data.email);
      $('#editModal #id').val(data.id);
      $('#editModal').modal('show');
    }
  });
});

// 删除按钮点击事件
$(document).on('click', '.delete-btn', function() {
  if(confirm('确定要删除这条记录吗？')) {
    var rowId = $(this).data('id');
    $.ajax({
      url: 'delete.php',
      type: 'POST',
      data: {id: rowId},
      success: function(response) {
        // 删除成功后刷新表格数据
        table.ajax.reload();
        alert('删除成功');
      },
      error: function() {
        alert('删除失败，请重试');
      }
    });
  }
});

3. 后台CRUD接口的注意事项

• server.php还是用ssp.class.php负责数据的查询、分页、排序，不用动它；
• 你需要单独写edit.php和delete.php来处理编辑和删除请求，这些接口和之前不用DataTables时的逻辑差不多，接收id参数，执行对应的数据库操作即可；
• 编辑完成后，同样要调用table.ajax.reload()来刷新表格数据。

额外小提示 #

• 如果需要更美观的弹窗，可以用Bootstrap的模态框，和上面示例里的写法兼容；
• 可以给按钮加个加载状态，避免用户重复点击；
• 记得在后台接口里做参数校验，防止恶意请求。

内容的提问来源于stack exchange，提问作者user9008566