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

时间:2017-06-21 01:15:51

标签: jquery datatables

我有一个DataTable,它有多个列,排序功能可以正常地用于除一个列以外的所有列。

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

表是否有办法了解最新值,以便也可以对新列进行排序。要向列添加文本,我使用Jquery的.text函数。

2 个答案:

答案 0 :(得分:0)

所以我使用每个函数的datatables行来遍历表中的所有行。我得到Id为第0列,并将其与延迟加载的JSON数据中的id进行比较。如果它匹配我更新单元格[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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

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

如果在从懒惰获取中的回调中调用,可能会很有用。