Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Josephin Doe
Generic placeholder image

hello Datta! Will you tell me something

about yourself?

8:20 a.m.

Ohh! very nice

8:22 a.m.

Generic placeholder image

can you help me?

8:20 a.m.

Auto Fill
Spreadsheets such as Excel and Google Docs have a very handy rapid data duplication auto fill UI method.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
KeyTable Integration
If you are looking to emulate the UI of spreadsheet programs such as Excel with DataTables, the combination of KeyTable and AutoFill will take you a long way there!
NamePositionOfficeAgeStart dateSalary
Airi Satou
Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Column 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
NamePositionOfficeAgeSalary
Airi Satou Accountant Tokyo 33 $162,700
Ashton Cox Junior Technical Author San Francisco 66 $86,000
Brielle Williamson Integration Specialist New York 61 $372,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 $433,060
Charde Marshall Regional Director San Francisco 36 $470,600
Colleen Hurst Javascript Developer San Francisco 39 $205,500
Garrett Winters Accountant Tokyo 63 $170,750
Haley Kennedy Senior Marketing Designer London 43 $313,500
Herrod Chandler Sales Assistant San Francisco 59 $137,500
Jena Gaines Office Manager London 30 $90,560
NamePositionOfficeAgeSalary
Showing 1 to 10 of 17 entries
Scrolling DataTable
When dragging an AutoFill handle, the table (if DataTables scrolling is enabled) or the window will be automatically scrolled
NamePositionOfficeAgeStart dateSalary
Name
Position
Office
Age
Start date
Salary
Name
Position
Office
Age
Start date
Salary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
NamePositionOfficeAgeStart dateSalary
Showing 1 to 30 of 30 entries
// [ Autofill ] $('#autofill').DataTable({ autoFill: true }); // [ KeyTable Integration ] $('#key-intergration').DataTable({ keys: true, autoFill: true }); // [ Column Selector ] $('#confirm-table').DataTable({ autoFill: { alwaysAsk: true } }); // [ scroll fill ] var safill = $('#scroll-fill').dataTable({ scrollY: 400, scrollCollapse: true, paging: false, autoFill: true }); $('#colum-select').DataTable({ columnDefs: [{ orderable: false, className: 'select-checkbox', targets: 0 }], select: { style: 'os', selector: 'td:first-child' }, order: [[1, 'asc']], autoFill: { columns: ':not(:first-child)' } });