12.03.2017.

DataTables example - Customised control buttons

Customised control buttons

Examples Veryoften,wheneditingaform,the Inthisexample,wemakeuseof
systemuserisrequiredtoperforma Buttons'sabilitytoeasilycreate
Manual repetitioustaskthatyouwishtooptimise customisedbuttonactionstoshowa
Reference theactionof.Forexample,thismightbe buttonthatwillusetheEditorform
activatingauseraccountinalistof (withoutdisplayingittotheenduser)to
Generator users,whereyousimplyclickanActivate add250tothesalaryvalueforthe
Plugins button. selectedrow.Thisisdonebyspecifyinga
custombuttonactionfunctionusing
buttons.buttons.action Option that
Blog
functionwilleditthecurrentlyselected
Forums row,alterthesalaryvalueandsubmititto
Contact theserver.

Support ItisworthnotingthatButtonsisusedin
thisexampleforsimplicity,butyoucould
Download useanycontrolonyourpagethatyou
wish!
Purchase

New Edit Salary+250 Delete Search:

Start
Name Position Office Extn. Salary
date

2008
AiriSatou Accountant Tokyo 5407 $162,700
1128

Chief
Angelica 2009
Executive London 5797 $1,200,000
Ramos 1009
Officer(CEO)

Junior
San 2009
AshtonCox Technical 1562 $86,000
Francisco 0112
Author

Bradley Software 2012

London 2558 $132,000
Greer Engineer 1013
Youraccount:
DataTables Editor
Brenden Software
Login/RegisterSan
Search...
2011
1314 $206,850
Wagner Engineer Francisco 0607

Brielle Integration 2012

NewYork 4804 $372,000
Williamson Specialist 1202

Software 2011
BrunoNash London 6222 $163,500
Engineer 0503

https://editor.datatables.net/examples/api/triggerButton.html 1/5
12.03.2017. DataTables example - Customised control buttons

Start
Name Position Office Extn. Salary
date

Caesar PreSales 2011

NewYork 8330 $106,450
Vance Support 1212

Cara Sales 2011

NewYork 3990 $145,600
Stevens Assistant 1206

Senior
2012
CedricKelly Javascript Edinburgh 6224 $433,060
0329
Developer

Start
Name Position Office Extn. Salary
date

Showing1to10of57entries

Previous 1 2 3 4 5 6 Next

Javascript HTML CSS Serverscript

Comments(0) Ajaxload Ajaxdata

TheJavascriptshownbelowisusedtoinitialisethetableshowninthis
example:

1 Javascript
vareditor//useaglobalforthesubmitandreturndatarenderi
2
3 $(document).ready(function(){
4 editor=new$.fn.dataTable.Editor({
5 ajax:"../php/staff.php",
6 table:"#example",
7 fields:[{
8 label:"Firstname:",
9 name:"first_name"
10 },{
11 label:"Lastname:",
12 name:"last_name"
13 },{
14 label:"Position:",
15 name:"position"
16 },{
17 label:"Office:",
18 name:"office"
Youraccount:
DataTables Editor
19 },{
Login/Register
Search...
20 label:"Extension:",
21 name:"extn"
22 },{
23 label:"Startdate:",
24 name:"start_date"
25 },{
26 label:"Salary:",
27 name:"salary"
28 }
https://editor.datatables.net/examples/api/triggerButton.html 2/5
12.03.2017. DataTables example - Customised control buttons
29 ]
30 })
31
32 vartable=$('#example').DataTable({
33 dom:"Bfrtip",
34 ajax:"../php/staff.php",
35 columns:[
36 {data:null,render:function(data,type,row){
37 //Combinethefirstandlastnamesintoasingle
38 returndata.first_name+''+data.last_name
39 }},
40 {data:"position"},
41 {data:"office"},
42 {data:"extn"},
43 {data:"start_date"},
44 {data:"salary",render:$.fn.dataTable.render.number
45 ],
46 select:true,
47 buttons:[
48 {extend:"create",editor:editor},
49 {extend:"edit",editor:editor},
50 {
51 extend:"selectedSingle",
52 text:"Salary+250",
53 action:function(e,dt,node,config){
54 //Immediatelyadd`250`tothevalueofthes
55 editor
56 .edit(table.row({selected:true
57 .set('salary',(editor.get('salary'
58 .submit()
59 }
60 },
61 {extend:"remove",editor:editor}
62 ]
63 })
64 })

Inadditiontotheabovecode,thefollowingJavascriptlibraryfilesareloaded
foruseinthisexample:

//code.jquery.com/jquery1.12.4.js
https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js
https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js
../../extensions/Editor/js/dataTables.editor.min.js

Youraccount:
DataTables Editor Login/Register
Search...

Otherexamples

https://editor.datatables.net/examples/api/triggerButton.html 3/5
12.03.2017. DataTables example - Customised control buttons

Simpleinitialisation Datesandtime
Basicinitialisation Datepicker
Multirowediting Formatteddates
Fieldtypes Dateandtimeinput
Settingdefaults Timeinputs
Localtableediting Timeincrementoptions
Internationalisation Optionsminandmaxdates
Intableformcontrols Optionsweeknumbers
Serversideprocessing Optionsdisabledays
Customformlayout/templates Internationalisation
Jointablesworkingwithmultiple jQueryUIDatePicker
SQLtables jQueryUIDatePickerwithcustom
formatting
Advancedinitialisation HTML5dateinput
Datashownonlyintheform
Datashownintableonly Inlineediting
Multiitemediting(rows,columns, Simpleinlineediting
cells) Tabbetweencolumns
RESTinterface Editingoptionssubmitonblur
Complex(nested)JSONdata Editingoptionssubmitfullrowdata
source
Inlineeditingwithasubmitbutton
AjaxoverrideusinglocalStorage
forthedatasource Editicon

RowIDsourcespecification Joinedtables

Compounddatabaseprimarykey Responsiveintegration

DOMsourcedtable Selectedcolumnsonly

Jointablesselfreferencingjoin FixedColumnsintegration

Jointableslinktable
Bubbleediting
Jointablesonetomanyjoin
Simplebubbleediting
Fileupload
Multiplefieldsinabubble
Fileupload(many)
Formcontrolanddisplayoptions
DataTablesextensions
Youraccount:
Defaultcontrolanddisplayoptions
DataTables Editor Login/Register
Search...
Bubbleeditingwithintablerow
Excellikekeyboardnavigation
controls
ExcellikeAutoFillfeature
AutoFillandKeyTabletogether
Exportbuttons
Responsivetableextension
Rowreordering

https://editor.datatables.net/examples/api/triggerButton.html 4/5
12.03.2017. DataTables example - Customised control buttons

API Styling
Dependentfields Bootstrap3
Eventsunsavedchangesclose Bootstrap4
confirmation Foundation
Clientsidevalidation SemanticUI
Customisedcontrolbuttons jQueryUI
Previous/nexteditingbuttons Fielddisplaystylingoptions
Cancelbutton Multicolumnlayout
Alwaysshowncheckbox Largewindowlayout
Duplicatebutton Stackedinputs
Customdelete/removemessage Envelopedisplaycontroller
Envelopedisplaywithintable
Standalone controls
Simplestandaloneediting Customformlayout/templates
Bubbleediting
Inlineediting Plugins
Standalonecollectioneditor Customfieldtypeplugins
Customdisplaycontroller

DataTablesandEditordesignedandcreatedbySpryMediaLtd20122016
SpryMediaLtdisregisteredinScotland,companyno.SC456502.

Youraccount:
DataTables Editor Login/Register
Search...

https://editor.datatables.net/examples/api/triggerButton.html 5/5