Javascript
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
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "../../controllers/staff.php",
table: "#example",
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"
}, {
label: "Salary:",
name: "salary"
}
]
} );
var table = $('#example').DataTable( {
dom: "Bfrtip",
ajax: "../../controllers/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: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
],
select: true,
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 }
]
} );
} );