jQuery DataTables添加列值，但使用列中的分页和输入

我在页面中有 DataTable ，通常有20行（所以期望分页） . 该表的一列显示数值 . 但是，根据某些条件，列数据可以是 input 元素，允许用户更改数字 . 列值中将混合使用数字，输入和任何内容 . 在表的顶部，我想要一个标签，显示所有列值的总和 .

使用DataTables编辑器对我来说不是一个选择 .

我的代码到目前为止：

var table;
$(document).ready(function() {
  var dataTableOptions = {
    dom: '<"html5buttons"B>lfgtp',
    columnDefs: [{
      targets: [0, 1],
      width: '50%'
    }, ]
  }
  table = $('#Table').DataTable();
  
  $('#btnCalculate').click(CalculateTotal);
  //Here is where the column total is calculated at the page load
  CalculateTotal()
});

function CalculateTotal() {
    var data = table.column(1).data();
    var total = 0;
    for (var i = 0; i < data.length; i++) {
      if (data[i]) {
        if (data[i].startsWith("<")) {
          var value = parseFloat($(data[i]).val());
          if (value && !isNaN(value)) {
            total += value;
          }
        } else {
          var number = parseFloat(data[i]);
          if (!isNaN(number)) {
            total += number;
          }
        }
      }
    }
    $('#ColumnTotal').text(total);
    return;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

<span id="ColumnTotal"></span> is the total.
<button id="btnCalculate">Calculate Total</button>

<table id="Table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td></td>
    </tr>
    <tr>
      <td>Keegan</td>
      <td>14</td>
    </tr>
    <tr>
      <td>Zander</td>
      <td><input id="ZanderNumber" type="number" value="32" /></td>
    </tr>
    <tr>
      <td>Michael</td>
      <td></td>
    </tr>
    <tr>
      <td>Bailey</td>
      <td><input id="BaileyNumber" type="number" value="" /></td>
    </tr>
    <tr>
      <td>Tony</td>
      <td><input id="TonyNumber" type="number" value="" /></td>
    </tr>
    <tr>
      <td>Peter</td>
      <td>62.97</td>
    </tr>
    <tr>
      <td>Reilly</td>
      <td></td>
    </tr>
    <tr>
      <td>Carson</td>
      <td><input id="BaileyNumber" type="number" value="18.4" /></td>
    </tr>
    <tr>
      <td>Patrick</td>
      <td></td>
    </tr>
    <tr>
      <td>Lillian</td>
      <td><input id="LillianNumber" type="number" value="128.4" /></td>
    </tr>
  </tbody>
</table>

现在这段代码有效，而且效果很好 . However ，因为当您在输入中键入新值时， input 值不会在DOM中更新，如果用户进行了任何更改（我会跟踪），这实际上不会更新列总计 . 但它们在 window 对象 do 中的值更新了 . 我've tried tapping into that to get the values, and it does work - but only for the input elements that are shown on the page. Since DataTables caches the other pages for performance and doesn' t在网页上呈现它们，它们不在 window 对象中 . 因此，我无法获得其他页面上任何现有输入的真实值 .

分页也是我不得不远离使用 $('#...') 等jQuery选择器的原因

有任何想法吗？