Since: AutoFill 2.0.0

An auto fill action has been completed. Please note - this property requires the AutoFill extension for DataTables.


This event is triggered when an fill action is completed by the end user. This occurs after the table has been updated and redraw by the fill. This can be useful to have the ability to submit the changes to a server / database to store the changes permanently.

The information about the cells that have been filled is given as an array (the cells parameter below) - this is an array of arrays, with each of the top level arrays representing a row and the inner elements being the columns - e.g.:

    [ cell_0-0, cell_0-1, cell_0-2, ... ],
    [ cell_1-0, cell_1-1, cell_1-2, ... ],
    [ cell_2-0, cell_2-1, cell_2-2, ... ],

There is always guaranteed to be more than one cell - therefore it is safe to access [0][0] as the first cell. This first cell is the one where the fill was started. The first row and column are on the same axis as that cell, regardless of if the fill was up, down, left or right.

Each inner array item is an object that represents a cell and contains the following properties:

  • cell - A DataTables Api instance for the cell in question - see cell()
  • index - The cell's index - see cell().index() - note this is the DataTables internal index not a visible index!
  • data - The cell's data before the fill
  • set - The cell's data after the fill


function function( e, datatable, cells )



Show a message when an auto fill is complete:

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

table.on( 'autoFill', function ( e, datatable, cells ) {
	alert( (cells.length * cells[0].length)+' cells were updated' );
} );