Datatables bug

Extra column data access and row redraw

HTML

<script src="datatables"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"></script>
<div class="instructions">
  Please go to page 2, then click reset. <br>
  You'll notice that there are redraws of old data before new data is drawn, because the ids from page 2 are in the redraw log.
</div>

<hr>

<div class="card">
  <div class="card-header">
    Row redraw log:
  </div>
  <div id="output" class="card-body"></div>
</div>

<hr>

<table id="mytable" class="table"></table>

<button id="reset">
  Reset
</button>

CSS

body {padding: 2em;}

JavaScript

function getData(opts, callback) {
  const data = [];
  // create mock data
  for (let i = opts.start; i < opts.length + opts.start; i++) {
    data.push({
      id: i + 1
    });
  }
  callback({
    draw: opts.draw,
    data: data,
    recordsFiltered: 100,
    recordsTotal: 100
  })
}

const mytable = $('#mytable').DataTable({

  ajax: getData,
  pageLength: 5,
  searching: false,
  lengthChange: false,
  serverSide: true,
  columns: [{
    title: "id",
    data: function(d) {
      $('#output').append(`<span class="badge badge-primary">${d.id}</span> `)

      return d.id;
    }
  }]
})


$('#reset').on('click', function() {
  $('#output').empty();
  mytable.ajax.reload();
})