Customised control buttons

Very often, when editing a form, the system user is required to perform a repetitious task that you wish to optimise the action of. For example, this might be activating a user account in a list of users, where you simply click an Activate button.

In this example, we make use of Buttons's ability to easily create customised button actions to show a button that will use the Editor form (without displaying it to the end user) to add 250 to the salary value for the selected row. This is done by specifying a custom button action function using buttons.buttons.action - that function will edit the currently selected row, alter the salary value and submit it to the server.

It is worth noting that Buttons is used in this example for simplicity, but you could use any control on your page that you wish!

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script
  • Comments (1)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
var editor = new DataTable.Editor({
    ajax: '../php/staff.php',
    fields: [
        {
            label: 'First name:',
            name: 'first_name'
        },
        {
            label: 'Last name:',
            name: 'last_name'
        },
        {
            label: 'Position:',
            name: 'position'
        },
        {
            label: 'Office:',
            name: 'office'
        },
        {
            label: 'Extension:',
            name: 'extn'
        },
        {
            label: 'Start date:',
            name: 'start_date',
            type: 'datetime'
        },
        {
            label: 'Salary:',
            name: 'salary'
        }
    ],
    table: '#example'
});
 
var table = $('#example').DataTable({
    ajax: '../php/staff.php',
    columns: [
        {
            data: null,
            render: function (data, type, row) {
                // Combine the first and last names into a single table field
                return data.first_name + ' ' + data.last_name;
            }
        },
        { data: 'position' },
        { data: 'office' },
        { data: 'extn' },
        { data: 'start_date' },
        { data: 'salary', render: DataTable.render.number(null, null, 0, '$') }
    ],
    layout: {
        topStart: {
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
                {
                    extend: 'selectedSingle',
                    text: 'Salary +250',
                    action: function (e, dt, node, config) {
                        // Immediately add `250` to the value of the salary and submit
                        editor
                            .edit(table.row({ selected: true }).index(), false)
                            .set('salary', editor.get('salary') * 1 + 250)
                            .submit();
                    }
                },
                { extend: 'remove', editor: editor }
            ]
        }
    },
    select: true
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
const editor = new DataTable.Editor({
    ajax: '../php/staff.php',
    fields: [
        {
            label: 'First name:',
            name: 'first_name'
        },
        {
            label: 'Last name:',
            name: 'last_name'
        },
        {
            label: 'Position:',
            name: 'position'
        },
        {
            label: 'Office:',
            name: 'office'
        },
        {
            label: 'Extension:',
            name: 'extn'
        },
        {
            label: 'Start date:',
            name: 'start_date',
            type: 'datetime'
        },
        {
            label: 'Salary:',
            name: 'salary'
        }
    ],
    table: '#example'
});
 
const table = new DataTable('#example', {
    ajax: '../php/staff.php',
    columns: [
        {
            data: null,
            render: (data) => data.first_name + ' ' + data.last_name
        },
        { data: 'position' },
        { data: 'office' },
        { data: 'extn' },
        { data: 'start_date' },
        { data: 'salary', render: DataTable.render.number(null, null, 0, '$') }
    ],
    layout: {
        topStart: {
            buttons: [
                { extend: 'create', editor },
                { extend: 'edit', editor },
                {
                    extend: 'selectedSingle',
                    text: 'Salary +250',
                    action: function (e, dt, node, config) {
                        // Immediately add `250` to the value of the salary and submit
                        editor
                            .edit(table.row({ selected: true }).index(), false)
                            .set('salary', editor.get('salary') * 1 + 250)
                            .submit();
                    }
                },
                { extend: 'remove', editor }
            ]
        }
    },
    select: true
});

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

    The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

    1
    2
    3
    a.marginLeft {
            margin-left: 1em;
        }

    The following CSS library files are loaded for use in this example to provide the styling of the table:

      This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

      The script used to perform the server-side interaction for this demo is shown below. This server uses PHP, so the PHP script is shown, however our download packages include the equivalent script for other platforms, including .NET and Node.js. Server-side scripts can be written in any language, using the protocol described in the Editor documentation.

      Comments (1)

      allan@v2.3.117:59, Thu 29th Feb 2024

      If you are interested in performing a custom editing action over multiple selected rows, rather than a single one as shown in this example, you can do so using the multi-row editing API of Editor along with ids() to know what rows you are editing.

      For example this example could be written for multiple rows as:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      {
        extend: "selected",
        text: "Salary +250",
        action: function (e, dt, node, config) {
          // Immediately add `250` to the value of the salary and submit
          editor.edit(table.rows({ selected: true }).indexes(), false);
       
          editor.ids().forEach(function (id) {
            let field = editor.field("salary");
            let current = field.multiGet(id);
       
            field.multiSet(id, current * 1 + 250);
          });
       
          editor.submit();
        },
      }

      Post new comment

      Contributions in the form of tips, code snippets and suggestions for the above material are very welcome. To post a comment, please use the form below. Text is formatted by Markdown.

      To post comments, please sign in to your DataTables account, or register:

      Any questions posted here will be deleted without being published.
      Please post questions in the Forums. Comments are moderated.

      allan@v2.3.117:59, Thu 29th Feb 2024

      If you are interested in performing a custom editing action over multiple selected rows, rather than a single one as shown in this example, you can do so using the multi-row editing API of Editor along with ids() to know what rows you are editing.

      For example this example could be written for multiple rows as:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      {
        extend: "selected",
        text: "Salary +250",
        action: function (e, dt, node, config) {
          // Immediately add `250` to the value of the salary and submit
          editor.edit(table.rows({ selected: true }).indexes(), false);
       
          editor.ids().forEach(function (id) {
            let field = editor.field("salary");
            let current = field.multiGet(id);
       
            field.multiSet(id, current * 1 + 250);
          });
       
          editor.submit();
        },
      }

      Post new comment

      Contributions in the form of tips, code snippets and suggestions for the above material are very welcome. To post a comment, please use the form below. Text is formatted by Markdown.

      To post comments, please sign in to your DataTables account, or register:

      Any questions posted here will be deleted without being published.
      Please post questions in the Forums. Comments are moderated.

      Other examples