event_webapi表格首页Selected_webapi开关点击无响应问题

问题现象 #

event_webapi表格的第一页（仅首页）中，点击Selected_webapi开关无响应；告警页面代码完全一致，但无此问题。

问题根源 #

核心原因是表格初始化后执行的额外.draw()操作导致首页元素被重新渲染，但事件绑定未同步更新：

• 初始化DataTable后，执行了datatable_WEBAPI_event.column(0).search('S06F11').draw()，这个操作会触发表格重新请求数据并渲染DOM；
• createdCell中的事件绑定仅在第一次表格渲染时生效，重新渲染后的新元素没有绑定change事件，导致点击无反应；
• 告警页面因无额外draw操作或数据加载逻辑不同，事件绑定正常。

另外，代码中依赖表格选中状态获取selectedRows的逻辑存在问题——开关操作并未触发行选中，会导致selectedRows为空，后续数据处理无效。

修复方案 #

方案1：将搜索条件整合到DataTable初始化中（推荐） #

把列搜索逻辑放到ajax的data回调里，避免初始化后额外的draw操作，确保第一次渲染就加载过滤后的数据，事件绑定正常生效。

方案2：使用事件委托绑定开关事件 #

通过父元素委托事件，不管表格如何重新渲染，新创建的开关元素都能触发事件。

同时修复数据处理逻辑，直接操作当前行数据，无需依赖表格选中状态。

修改后的代码 #

方案1实现（整合搜索条件） #

function modalTable_WEBAPI_event() {
  console.log("TABLE MODAL");
  const getToken = localStorage.getItem("token");
  var getData;
  var currentPage = 1;
  newValue = localStorage.getItem("newValue");

  var datatable_WEBAPI_event = $("#id_datatable_WEBAPI_event").DataTable({
    processing: true,
    lengthChange: false,
    serverSide: true,
    ajax: {
      url: newValue + '/api/message/list',
      headers: {
        'Authorization': 'Bearer ' + getToken
      },
      type: "POST", 
      contentType: 'application/json',
      data: function(d) {
        d.search = d.search.value;
        // 将列搜索条件整合到请求参数中，替代后续的draw操作
        d.columns[0].search = 'S06F11';
        console.log(d);
        return JSON.stringify(d);
      },
      dataSrc: function (response) {
        console.log("DATA MODAL TABLE", response.data);
        getData = response.data.map(obj => {
          let result = JSON.parse(JSON.stringify(obj));
          result['isChanged'] = false;
          return result;
        });
        console.log('DATA CHANGE', getData);
        return getData;
      },
    },
    destroy: true,
    columns: [
      { data: "sf", title: "sf" },
      { data: "code", title: "code" },
      { data: "subcode", title: "subcode" },
      { data: "msgtext", title: "msgtext" },
      { data: "description", title: "description_webapi_event" },
      {
        data: null,
        title: "Alarm/Event Setting",
        render: function (data, type, row) {
          var switchId = 'customSwitch_' + row.id;
          var switchHTML = '<div class="custom-control custom-switch">';
          var isChecked = row.webapi ? 'checked' : '';
          switchHTML += '<input type="checkbox" class="custom-control-input webapi-switch" id="webapi_' + switchId + '" ' + isChecked + '>';
          switchHTML += '<label class="custom-control-label" for="webapi_' + switchId + '">Selected_webapi</label>';
          switchHTML += '</div>';
          return switchHTML;
        },
        createdCell: function (td, cellData, rowData, row, col) {
          var switchElement = $(td).find('.webapi-switch');
          switchElement.change(function () {
            // 直接操作当前行数据，无需依赖表格选中状态
            rowData.webapi = $(this).is(':checked');
            rowData.isChanged = true;

            // 更新getData数组中的对应数据
            const targetIndex = getData.findIndex(item => item.id === rowData.id);
            if (targetIndex !== -1) {
              getData[targetIndex] = rowData;
            }

            // 构造提交数据
            var changedData = getData.filter(item => item.isChanged === true);
            var changedData_to_jsonAPI_webapi_0 = changedData.map(item => ({
              id: item.id,
              enable: item.webapi
            }));
            var changedData_to_jsonAPI_webapi = {
              draw: 1,
              length: changedData_to_jsonAPI_webapi_0.length,
              server: "webapi",
              data: changedData_to_jsonAPI_webapi_0
            };
            console.log("changedData_to_jsonAPI_webapi:", changedData_to_jsonAPI_webapi);
          });
        },
      }
    ]
  });

  // 初始化标签页
  $('#webapiTabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
  });

  // 定时刷新逻辑保持不变
  setTimeout(function() {
    currentPage = datatable_WEBAPI_event.page.info().page;
    console.log("Current Page:", currentPage);
    datatable_WEBAPI_event.ajax.reload(function(){
      datatable_WEBAPI_event.page(currentPage).draw('page');
    }, false);
  }, 60000);
}

方案2实现（事件委托） #

如果无法修改搜索逻辑，可通过事件委托替代createdCell中的事件绑定：

function modalTable_WEBAPI_event() {
  console.log("TABLE MODAL");
  const getToken = localStorage.getItem("token");
  var getData;
  var currentPage = 1;
  newValue = localStorage.getItem("newValue");

  var datatable_WEBAPI_event = $("#id_datatable_WEBAPI_event").DataTable({
    processing: true,
    lengthChange: false,
    serverSide: true,
    ajax: {
      url: newValue + '/api/message/list',
      headers: {
        'Authorization': 'Bearer ' + getToken
      },
      type: "POST", 
      contentType: 'application/json',
      data: function(d) {
        d.search = d.search.value;
        console.log(d);
        return JSON.stringify(d);
      },
      dataSrc: function (response) {
        console.log("DATA MODAL TABLE", response.data);
        getData = response.data.map(obj => {
          let result = JSON.parse(JSON.stringify(obj));
          result['isChanged'] = false;
          return result;
        });
        console.log('DATA CHANGE', getData);
        return getData;
      },
    },
    destroy: true,
    columns: [
      { data: "sf", title: "sf" },
      { data: "code", title: "code" },
      { data: "subcode", title: "subcode" },
      { data: "msgtext", title: "msgtext" },
      { data: "description", title: "description_webapi_event" },
      {
        data: null,
        title: "Alarm/Event Setting",
        render: function (data, type, row) {
          var switchId = 'customSwitch_' + row.id;
          var switchHTML = '<div class="custom-control custom-switch">';
          var isChecked = row.webapi ? 'checked' : '';
          switchHTML += '<input type="checkbox" class="custom-control-input webapi-switch" data-row-id="' + row.id + '" id="webapi_' + switchId + '" ' + isChecked + '>';
          switchHTML += '<label class="custom-control-label" for="webapi_' + switchId + '">Selected_webapi</label>';
          switchHTML += '</div>';
          return switchHTML;
        }
      }
    ]
  });

  // 使用事件委托绑定开关change事件，确保新渲染的元素也能触发
  $("#id_datatable_WEBAPI_event").on('change', '.webapi-switch', function() {
    const rowId = $(this).data('row-id');
    const isChecked = $(this).is(':checked');
    // 找到对应的行数据
    const rowData = getData.find(item => item.id === rowId);
    if (rowData) {
      rowData.webapi = isChecked;
      rowData.isChanged = true;
      // 构造提交数据
      var changedData = getData.filter(item => item.isChanged === true);
      var changedData_to_jsonAPI_webapi_0 = changedData.map(item => ({
        id: item.id,
        enable: item.webapi
      }));
      var changedData_to_jsonAPI_webapi = {
        draw: 1,
        length: changedData_to_jsonAPI_webapi_0.length,
        server: "webapi",
        data: changedData_to_jsonAPI_webapi_0
      };
      console.log("changedData_to_jsonAPI_webapi:", changedData_to_jsonAPI_webapi);
    }
  });

  // 初始化标签页
  $('#webapiTabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
  });

  datatable_WEBAPI_event.column(0).search('S06F11').draw();

  // 定时刷新逻辑保持不变
  setTimeout(function() {
    currentPage = datatable_WEBAPI_event.page.info().page;
    console.log("Current Page:", currentPage);
    datatable_WEBAPI_event.ajax.reload(function(){
      datatable_WEBAPI_event.page(currentPage).draw('page');
    }, false);
  }, 60000);
}

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