DataTable删除功能id变量未定义问题排查

问题描述 #

点击删除按钮时，console.log("GET DLETE ID", id)输出undefined，但点击编辑按钮时，第70行的console.log("GET edit DATA", data)能正常获取并打印数据及ID。

• 删除按钮对应的id未定义的问题出在哪里？
• 已确认在render函数中添加console.log("row", row)可以打印出完整的行数据。

相关代码 #

完整页面代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags and other head elements -->
  <title>Account Management</title>

<body>

  <h1>Account Management</h1>
    <main id="main-holder">

    </main>
    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"
  ></script>

  <script>

var Selected_add_edit_api;

    $(document).ready(function () {
      const getToken = localStorage.getItem("token")

      console.log("GET TOKEN", getToken)

      var table = $("#example").DataTable({
        ajax: {
          url: "http://192.168.10.01:8000/api/user_info/",
          headers: {
            'Authorization': 'Bearer ' + getToken
          },
          dataSrc: function (response) {
            console.log("DATA", response.users);
            return response.users
          }
        },
        columns: [
          {
            data: null,
            title: "ACTION",
            render: function (data, type, row) {
              return '<button type="button" class="btn btn-primary" id="Edit_Data" data-toggle="modal" data-target="#exampleModal" data-whatever=" ">Edit</button>' +
                '<button class="btn btn-danger btn-sm delete-btn" id="Delete_Data" data-id="' + row.device_id + '&quot;">Delete</button>';
            }
          },
          { data: "userid", title: "Login ID" },
          { data: "name", title: "Name" },
          { data: "acc_type", title: "Account Type" },
          { data: "created_at", title: "Created Time" }
        ]
      });

      table.draw()

      var rowData;

      $('#example tbody').on('click', 'button', function (event) {
        var data = table.row($(this).parents('tr')).data();
        rowData = data;
        console.log("GET edit DATA", data)              // 此处仍能获取并打印数据与id
      });

      $(function() {
      $('#exampleModal').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget);
        var recipient = button.data('whatever');
        var modal = $(this);
        var data = rowData;

        var inputFields = modal.find('.modal-body input');

        if (button.attr('id') == "AddedNew_Data02" || button.attr('id') == "AddedNew_Data" ) {
          inputFields.val("");
          modal.find('.modal-title').text('Add Data ' + recipient);
          Selected_add_edit_api = "add-api";
        } else {
          var keys = Object.keys(data);
          for (var i = 0; i < inputFields.length; i++) {
            var inputValue = data[keys[i]];
            var inputValue = rowData[keys[i]];
            modal.find('.modal-title').text('Edit Data ' + recipient);
            Selected_add_edit_api = "edit-api";
            $(inputFields[i]).val(inputValue);
          }
        }
      });
    });

      function editRow_website(id){
        var device_id=document.getElementById("userid"+id);
        var name=document.getElementById("name"+id);
        var acc_type=document.getElementById("acc_type"+id);

        let getEditData = {
          "userid": userid,
          "name": name,
          "account type": acc_type,
        }

        document.getElementById("#editid input").value = device_id
      }

      $(document).on('click', '.delete-btn', function (event) {
        var id = $(this).data('id')
        console.log("GET DLETE ID", id)
        confirmDelete(id)
      });

      function deleteData(id) {
        $.ajax({
          url: "http://192.168.10.01:8000/api/user_info/?id="+ id,
          type:'DELETE',
          headers: {
            'Authorization': 'Bearer ' + getToken
          },
          success: function(response){
            console.log(response);
          }
        }).then(res => console.log("RES", res));
      }
    });
  </script>

</body>
</html>

新增console.log后的render代码片段 #

columns: [
  {
    data: null,
    title: "ACTION",
    render: function (data, type, row) {
      console.log("row", row);
      return '<button type="button" class="btn btn-primary" id="Edit_Data" data-toggle="modal" data-target="#exampleModal" data-whatever=" ">Edit</button>' +
        '<button class="btn btn-danger btn-sm delete-btn" id="Delete_Data" data-id="' + row.device_id + '&quot;">Delete</button>';
    }
  },
  { data: "userid", title: "Login ID" },
  { data: "name", title: "Name" },
  { data: "acc_type", title: "Account Type" },
  { data: "created_at", title: "Created Time" }
]

问题原因及解决方案 #

问题原因 #

删除按钮的HTML生成代码存在引号拼写错误：

'<button class="btn btn-danger btn-sm delete-btn" id="Delete_Data" data-id="' + row.device_id + '&quot;">Delete</button>'

这里错误地使用"闭合data-id的属性值，而非正确的双引号"，导致浏览器解析时data-id属性值不完整，最终$(this).data('id')无法获取到有效ID，返回undefined。

解决方案 #

修正render函数中删除按钮的字符串，将"替换为"：

'<button class="btn btn-danger btn-sm delete-btn" id="Delete_Data" data-id="' + row.device_id + '">Delete</button>'

修改后data-id属性能正确存储row.device_id的值，点击删除按钮时即可通过$(this).data('id')获取到有效的ID。

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