Datta Able
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.

Button Basic Initialization
Custom Button
The Buttons extension for DataTables provides a common set of options,
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
Class Names
specify a custom class name for the button. A little bit of CSS is used to style the buttons - the class names and CSS can of course be adjusted to suit whatever styling requirements you have
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
Keyboard Activation
Keyboard navigation is essential for fast navigation of a table operations and also for good accessibility. Buttons provides the ability to give each button a key binding
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
Multi-Level Collections
This example shows a custom collection button with the addition of a column visibility button, which when activated will show another collection of buttons, this time controlling the column visibility.
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
Multiple Button Groups
Buttons' ability to have new instances constructed arbitrarily gives it the ability to have multiple button instances created for a single DataTable.
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
// [ Custom button ] $('#custom-btn').DataTable({ dom: 'Bfrtip', buttons: [{ text: 'My Custom button', action: function (e, dt, node, config) { alert('Button activated'); } }] }); // [ Class names ] $('#class-btn').DataTable({ dom: 'Bfrtip', buttons: [{ text: 'Warning', className: 'btn-warning' }, { text: 'Danger', className: 'btn-danger' }, { text: 'Inverse', className: 'btn-inverse' }] }); // [ Keyboard activation ] $('#keyboard-btn').DataTable({ dom: 'Bfrtip', buttons: [{ text: 'Button 1', key: '1', action: function (e, dt, node, config) { alert('Button 1 activated'); } }, { text: 'Button alt 2', key: { altKey: true, key: '2' }, action: function (e, dt, node, config) { alert('Button 2 activated'); } }] }); // [ Multi-Level collections ] $('#multilevel-btn').DataTable({ dom: 'Bfrtip', buttons: [{ extend: 'collection', text: 'Table control', buttons: [{ text: 'Toggle start date', action: function (e, dt, node, config) { dt.column(-2).visible(!dt.column(-2).visible()); } }, { text: 'Toggle salary', action: function (e, dt, node, config) { dt.column(-1).visible(!dt.column(-1).visible()); } }, 'colvis'] }] }); // [ Multiple Button Groups ] start var table = $('#multibtn-grup').DataTable({ dom: 'Bfrtip', buttons: [{ text: 'Button 1', action: function (e, dt, node, config) { alert('Button 1 clicked on'); } }] });