如何让DataTable绿色编辑按钮弹窗填充原始默认数据？

步骤1：修正绿色编辑按钮的标识绑定 #

首先修改DataTables中绿色编辑按钮的渲染代码，把固定的data-id="1"改成当前行的唯一标识（比如row.device_id），确保按钮能关联到具体行：

{
  data: null,
  title: "edit",
  render: function (data, type, row) {
    return '<button class="btn btn-success btn-sm green-edit-btn" data-id="' + row.device_id + '" data-toggle="modal" data-target="#exampleModal">Edit</button>';
  }
}

步骤2：完善模态框的表单字段 #

把模态框里的单个输入框替换成对应表格字段的输入框，每个输入框添加明确的类名方便后续填充：

<div class="modal-body">
  <div class="form-group">
    <label>设备ID</label>
    <input class="form-control modal-input-device_id" placeholder="设备ID" />
  </div>
  <div class="form-group">
    <label>名称</label>
    <input class="form-control modal-input-name" placeholder="名称" />
  </div>
  <div class="form-group">
    <label>分组</label>
    <input class="form-control modal-input-group" placeholder="分组" />
  </div>
  <div class="form-group">
    <label>IP地址</label>
    <input class="form-control modal-input-ip" placeholder="IP地址" />
  </div>
  <div class="form-group">
    <label>端口</label>
    <input class="form-control modal-input-port" placeholder="端口" />
  </div>
  <div class="form-group">
    <label>IPC启用状态</label>
    <input class="form-control modal-input-ipc_enable" placeholder="IPC启用状态" />
  </div>
  <div class="form-group">
    <label>FTP启用状态</label>
    <input class="form-control modal-input-ftp_enable" placeholder="FTP启用状态" />
  </div>
</div>

步骤3：修改模态框显示逻辑，填充行数据 #

在模态框的show.bs.modal事件中，通过点击的按钮获取对应行的完整数据，然后将数据填充到各个输入框中：

$(function() {
  $('#exampleModal').on('show.bs.modal', function(e) {
    let btn = $(e.relatedTarget);
    let deviceId = btn.data('id');
    // 通过DataTables获取对应行的完整数据
    let rowData = $('#example').DataTable().row(function(idx, data, node) {
      return data.device_id === deviceId;
    }).data();
    
    // 填充数据到模态框输入框
    $('.modal-input-device_id').val(rowData.device_id);
    $('.modal-input-name').val(rowData.name);
    $('.modal-input-group').val(rowData.group);
    $('.modal-input-ip').val(rowData.ip);
    $('.modal-input-port').val(rowData.port);
    $('.modal-input-ipc_enable').val(rowData.ipc_enable);
    $('.modal-input-ftp_enable').val(rowData.ftp_enable);
    
    // 将设备ID绑定到保存按钮
    $('.saveEdit').data('deviceId', deviceId);
  })

  $('.saveEdit').on('click', function() {
    let deviceId = $(this).data('deviceId');
    // 收集修改后的数据
    let updatedData = {
      device_id: $('.modal-input-device_id').val(),
      name: $('.modal-input-name').val(),
      group: $('.modal-input-group').val(),
      ip: $('.modal-input-ip').val(),
      port: $('.modal-input-port').val(),
      ipc_enable: $('.modal-input-ipc_enable').val(),
      ftp_enable: $('.modal-input-ftp_enable').val()
    };
    // 调用更新接口
    updateRow(deviceId, updatedData);
    $('#exampleModal').modal('toggle');
  })
})

function updateRow(deviceId, updatedData) {
  const getToken = localStorage.getItem("token");
  $.ajax({
    url: `http://192.168.01.10:8000/api/item_all?device_id=${deviceId}`,
    type: 'PUT',
    headers: {
      'Authorization': 'Bearer ' + getToken  
    },
    data: updatedData,
    success: function(response){
      console.log('更新成功:', response);
      // 更新DataTables数据
      $('#example').DataTable().ajax.reload();
    },
    error: function(err) {
      console.error('更新失败:', err);
    }
  });
}

步骤4：清理冗余代码 #

移除原代码中未使用的editRow_website函数，以及重复的表格列（原代码中有两个device_id列，可保留一个）。

修改完成后，点击绿色编辑按钮时，模态框会自动填充对应行的原始数据，修改后点击保存即可提交更新，表格数据也会自动刷新。

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