javascript - 数据表 deferRender 不延迟

Question

我不明白这个实现有什么问题。请注意，我的数据是“空的”，因为我计划根据行/列坐标创建单元格。因此，我传入一个虚拟数组并在 render() 回调中返回内容。

您会在控制台日志中注意到它调用 createdCell() 100*100 次...生成的 html 也同意。

var size = 100
var zeroes = new Uint8Array(size)
var data = _.range(size).map(function() {
  return zeroes
})
var cells = 0
var rows = 0
var config = {
  autoWidth: false,
  paging: false, // Disable Paging                                   
  ordering: true, // Sortable columns                                 
  info: false, // Disable 'showing x of x entries'                 
  data: data,
  deferRender: true,
  processing: true,
  createdRow: function(cell, data, dataIndex) {
    rows += 1
  },
  columnDefs: [{
    targets: _.range(size),
    title: 'Title',
    render: function(data, type, row, meta) {
      return meta.col * meta.row
    },
    createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
      cells += 1
    },
  }],
}
var dataTable = $('#dashboard-table').DataTable(config)
console.log("Rows: " + rows)
console.log("Cells: " + cells)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table className="table table-compressed" id="dashboard-table">
</table>

这也是 fiddle :

https://jsfiddle.net/rrauenza/x5nj7qgt/

为什么这不会推迟单元创建？

Answer 1

啊，我想我明白发生了什么事。 deferRender 仅在配置中的 paging=true 时有效，并延迟其他页面渲染。

Datatables Scroller 插件可能更接近我的预期。