AutoFill example Column selector

AutoFill provides the ability to determine what columns it should be enabled upon through the autoFill.columns option. This will accept any value allowed by the column-selector data type, such as an array of column indexes, class names, or as shown in this case a jQuery selector.

This ability to exclude columns from the AutoFill action can be particularly useful if the table contains non-data columns. This example uses the Select extension for DataTables to allow row selection through the select option, with row selection restricted to the first column. Thus we do not wish to have AutoFill on that column and the selector :not(:first-child) for autoFill.columns enacts that.

Combining AutoFill with Editor (and other extensions such as RowReorder and KeyTable) can make for a powerful data editing environment for end users.

NamePositionOfficeAgeSalary
NamePositionOfficeAgeSalary
Airi Satou Accountant Tokyo 33 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 $86,000
Bradley Greer Software Engineer London 41 $132,000
Brenden Wagner Software Engineer San Francisco 28 $206,850
Brielle Williamson Integration Specialist New York 61 $372,000
Bruno Nash Software Engineer London 38 $163,500
Caesar Vance Pre-Sales Support New York 21 $106,450
Cara Stevens Sales Assistant New York 46 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 $433,060
Showing 1 to 10 of 57 entries

The Javascript shown below is used to initialise the table shown in this example:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]],
        autoFill: {
            columns: ':not(:first-child)'
        }
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

Other examples

Initialisation

Styling

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2017
DataTables is licensed under the MIT license.