对数据表中新添加的列值进行排序不起作用答案

【问题标题】：Sorting newly added column values in datatable not working对数据表中新添加的列值进行排序不起作用
【发布时间】：2017-06-21 01:15:50
【问题描述】：

我有一个包含多列的 DataTable，排序功能对除一列之外的所有列都正常工作。

对于不起作用的列，我稍后会在用户操作后执行延迟提取后将值添加到表中，而在呈现表时会加载列中的所有其他值。

有没有办法让表格知道最新的值，以便新列也可以排序。要将文本添加到列中，我使用 Jquery 的 .text 函数。

【问题讨论】：

只是想知道，如果打开了排序，并且您懒加载其中一列的值，您怎么知道该列属于哪一行？就像他们已经对表格进行了排序一样，您如何知道将延迟加载的数据放入哪一行？延迟加载数据是否还有某种主键。也许您可以显示延迟加载数据的样子
每一行都有一个标识符。我获取的数据将标识符映射到一个值。所以我匹配对应的行。
是的，类似于主键
好的，我会试着做一个小提琴

标签： jquery datatables

【解决方案1】：

所以我使用每个函数的数据表行来遍历表中的所有行。我得到第 0 列的 ID，并将其与延迟加载的 JSON 数据中的 ID 进行比较。如果匹配，我会更新 cell[4] 的年龄列。

运行下面的小提琴并单击加载年龄按钮。即使您对其进行了排序，它也应该正确地获取年龄，并且它们应该是可排序的。

var Ages = [{
  'id': '1',
  'age': '63'
}, {
  'id': '2',
  'age': '66'
}, {
  'id': '3',
  'age': '22'
}, {
  'id': '4',
  'age': '33'
}];


var table = $('#example').DataTable({

});

$('#addagesBtn').click(function(event) {
  table.rows().every(function(rowIdx, tableLoop, rowLoop) {
    var self = this;
    var d = this.data();
    var id = d[0]
    $.each(Ages, function(i, item) {
      if (item.id === id) {
        d[4] = item.age
        self.data(d);
        self.invalidate();
      }
    });
  });
  table.draw();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>

    <tr>
      <td>1</td>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td></td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td></td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td></td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td></td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>

  </tbody>
</table>

<button id="addagesBtn">
  lazy load ages
</button>

【讨论】：

【解决方案2】：

cell().invalidate() 函数 https://datatables.net/reference/api/cell().invalidate()

或 row().invalidate() 函数 https://datatables.net/reference/api/row().invalidate()

如果在 Lazy Fetch 的回调中调用，可能会有用。

【讨论】：