如何对Datatable指定列中所有文本框的输入值进行求和计算

第一步：优化列render配置 #

你原有代码存在固定ID重复的问题，会导致DOM选择异常，先添加专属类名用于定位该列所有输入框，同时支持回显已存数值：

render: function (data, type, row) {
  // 移除固定重复id，新增dt-col-input类用于统一选择该列输入框，value属性支持回显行数据
  return '<input class="form-control dt-col-input" name="itemId" maxlength="350" value="' + (data || '') + '" multiline="true" type="text" >';
}

第二步：单页场景求和实现 #

如果你的Datatable未开启分页，仅需要计算当前页输入值，直接遍历DOM取值累加即可：

求和函数 #

function calcColumnSum() {
  let total = 0;
  $('.dt-col-input').each(function () {
    const inputVal = parseFloat($(this).val().trim());
    // 仅累加合法数值，避免非数字输入导致计算异常
    if (!isNaN(inputVal)) {
      total += inputVal;
    }
  });
  // 保留2位小数可根据需求调整
  return total.toFixed(2);
}

触发逻辑 #

• 实时计算：绑定输入事件自动更新结果

// 用事件委托绑定，适配Datatable动态重绘后事件不失效
$(document).on('input', '.dt-col-input', function () {
  const sum = calcColumnSum();
  // 替换为你页面上展示求和结果的元素选择器即可
  $('#sum-result').text(sum);
});

• 点击按钮计算：在按钮点击事件中直接调用calcColumnSum()获取结果

第三步：跨分页场景求和实现 #

如果开启了分页，需要把输入值同步存入Datatable行数据缓存，遍历全表数据计算：

初始化时保存Datatable实例 #

// 替换为你的表格选择器，初始化时保存实例
const dataTable = $('#your-table-id').DataTable({
  // 其余原有配置不变
  columns: [
    // 其余列配置不变
    {
      // 该列对应的数据源字段名，可自定义，比如命名为inputVal
      data: 'inputVal',
      render: function (data, type, row) {
        return '<input class="form-control dt-col-input" name="itemId" maxlength="350" value="' + (data || '') + '" multiline="true" type="text" >';
      }
    }
  ]
});

输入同步更新行数据+跨页求和 #

$(document).on('input', '.dt-col-input', function () {
  // 获取当前输入框所属的行实例
  const currentRow = dataTable.row($(this).closest('tr'));
  // 更新行数据缓存，字段名和列配置的data字段保持一致
  currentRow.data().inputVal = $(this).val().trim();
  
  // 遍历全表所有行计算总和
  let total = 0;
  dataTable.rows().every(function () {
    const val = parseFloat(this.data().inputVal);
    if (!isNaN(val)) {
      total += val;
    }
  });
  $('#sum-result').text(total.toFixed(2));
});

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