Jquery Customised datatable Grids inline add edit delete
Customised control buttons – jquery datatable editable cell Grid
use a simple DataTable global var set for the submit data inline dataTables and return all the data rendering in the Simple liveDatatables.when simple editing a form HTML Based DataTable, the system user simply is required to perform all of the form a repetitious task list add delete that we wish to simple optimise the all action of. For example, insert records this might be activating user a user account in a simple list of users, where we simply add,update remove click an Activate button.Jquery datatable inline add edit delete Customised
include Javascript Libs
jquery-1.12.4.js jquery.dataTables.min.js dataTables.buttons.min.js dataTables.select.min.js dataTables.editor.min.js [php] <b>Include CSS External files</b> [php] jquery.dataTables.min.css buttons.dataTables.min.css select.dataTables.min.css editor.dataTables.min.css
EditableGrid, build powerful editable tables Scripts
index.js
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "../php/myweblist.php",
table: "#liveDatatable",
fields: [ {
label: "First name:",
name: "client_name"
}, {
label: "Last name:",
name: "client_sirname"
}, {
label: "employer_post:",
name: "employer_post"
}, {
label: "roomname:",
name: "roomname"
}, {
label: "Extension:",
name: "uniqfund"
}, {
label: "Start date:",
name: "start_date"
}, {
label: "bonusext:",
name: "bonusext"
}
]
} );
var table = $('#liveDatatable').DataTable( {
dom: "Bfrtip",
ajax: "../php/myweblist.php",
columns: [
{ data: null, render: function ( data, type, row ) {
return data.client_name+' '+data.client_sirname;
} },
{ data: "employer_post" },
{ data: "roomname" },
{ data: "uniqfund" },
{ data: "start_date" },
{ data: "bonusext", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{
extend: "selectedSingle",
text: "bonusext +480",
action: function ( e, dt, node, config ) {
editor
.edit( table.row( { selected: true } ).index(), false )
.set( 'bonusext', (editor.get( 'bonusext' )*1) + 480 )
.submit();
}
},
{ extend: "remove", editor: editor }
]
} );
} );
index.html
<table id="liveDatatable">
<thead>
<tr>
<th>Name</th>
<th>employer_post</th>
<th>roomname</th>
<th>uniqfund.</th>
<th>Start date</th>
<th>bonusext</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>employer_post</th>
<th>roomname</th>
<th>uniqfund.</th>
<th>Start date</th>
<th>bonusext</th>
</tr>
</tfoot>
</table>
CSS
a.marginLeft {
margin-left: 2em;
}
Server Side : PHP Code
fields(
Field::inst( 'client_name' )->validator( 'Validate::notEmpty' ),
Field::inst( 'client_sirname' )->validator( 'Validate::notEmpty' ),
Field::inst( 'employer_post' ),
Field::inst( 'email' ),
Field::inst( 'roomname' ),
Field::inst( 'uniqfund' ),
Field::inst( 'experiance' )
->validator( 'Validate::numeric' )
->setFormatter( 'Format::ifEmpty', null ),
Field::inst( 'bonusext' )
->validator( 'Validate::numeric' )
->setFormatter( 'Format::ifEmpty', null ),
Field::inst( 'start_date' )
->validator( 'Validate::dateFormat', array(
"format" => Format::DATE_ISO_8601,
"messexperiance" => "Please enter a date in the format yyyy-mm-dd"
) )
->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601 )
)
->process( $_POST )
->json();
Ajax Load JSON
{
"data": [
{
"DT_RowId": "row_1",
"client_name": "Tiger",
"client_sirname": "Nixon",
"employer_post": "System Architect",
"email": "[email protected]",
"roomname": "Edinburgh",
"uniqfund": "5421",
"experiance": "61",
"bonusext": "320800",
"start_date": "2025-04-25"
},
{
"DT_RowId": "row_2",
"client_name": "Garrett",
"client_sirname": "Winters",
"employer_post": "Accountant",
"email": "[email protected]",
"roomname": "Tokyo",
"uniqfund": "8422",
"experiance": "63",
"bonusext": "170750",
"start_date": "2025-07-25"
},
{
"DT_RowId": "row_3",
"client_name": "Ashton",
"client_sirname": "Cox",
"employer_post": "Junior Technical Author",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "1562",
"experiance": "66",
"bonusext": "86000",
"start_date": "2022-01-12"
},
{
"DT_RowId": "row_4",
"client_name": "Cedric",
"client_sirname": "Kelly",
"employer_post": "Senior Javascript Developer",
"email": "[email protected]",
"roomname": "Edinburgh",
"uniqfund": "6224",
"experiance": "22",
"bonusext": "433060",
"start_date": "2021-03-29"
},
{
"DT_RowId": "row_5",
"client_name": "Airi",
"client_sirname": "Satou",
"employer_post": "Accountant",
"email": "[email protected]",
"roomname": "Tokyo",
"uniqfund": "5407",
"experiance": "33",
"bonusext": "162700",
"start_date": "2019-11-28"
},
{
"DT_RowId": "row_6",
"client_name": "Brielle",
"client_sirname": "Williamson",
"employer_post": "Integration Specialist",
"email": "[email protected]",
"roomname": "India",
"uniqfund": "4804",
"experiance": "61",
"bonusext": "372000",
"start_date": "2021-12-02"
},
{
"DT_RowId": "row_7",
"client_name": "Herrod",
"client_sirname": "Chandler",
"employer_post": "Sales Assistant",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "9608",
"experiance": "59",
"bonusext": "137500",
"start_date": "2021-08-06"
},
{
"DT_RowId": "row_8",
"client_name": "Rhona",
"client_sirname": "Davidson",
"employer_post": "Integration Specialist",
"email": "[email protected]",
"roomname": "Tokyo",
"uniqfund": "6200",
"experiance": "55",
"bonusext": "327900",
"start_date": "2018-10-14"
},
{
"DT_RowId": "row_9",
"client_name": "Colleen",
"client_sirname": "Hurst",
"employer_post": "Javascript Developer",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "2360",
"experiance": "39",
"bonusext": "205500",
"start_date": "2022-09-15"
},
{
"DT_RowId": "row_10",
"client_name": "Sonya",
"client_sirname": "Frost",
"employer_post": "Software Engineer",
"email": "[email protected]",
"roomname": "Edinburgh",
"uniqfund": "1667",
"experiance": "23",
"bonusext": "103600",
"start_date": "2019-12-13"
},
{
"DT_RowId": "row_11",
"client_name": "Jena",
"client_sirname": "Gaines",
"employer_post": "roomname Manexperiancer",
"email": "[email protected]",
"roomname": "Austrialiya",
"uniqfund": "3814",
"experiance": "30",
"bonusext": "90560",
"start_date": "2019-12-19"
},
{
"DT_RowId": "row_12",
"client_name": "Quinn",
"client_sirname": "Flynn",
"employer_post": "Support Lead",
"email": "[email protected]",
"roomname": "Edinburgh",
"uniqfund": "9497",
"experiance": "22",
"bonusext": "342000",
"start_date": "2020-03-03"
},
{
"DT_RowId": "row_13",
"client_name": "Charde",
"client_sirname": "Marshall",
"employer_post": "Regional hod",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "6741",
"experiance": "36",
"bonusext": "470600",
"start_date": "2019-10-16"
},
{
"DT_RowId": "row_14",
"client_name": "Haley",
"client_sirname": "Kennedy",
"employer_post": "Senior management Designer",
"email": "[email protected]",
"roomname": "Austrialiya",
"uniqfund": "3597",
"experiance": "43",
"bonusext": "313500",
"start_date": "2021-12-18"
},
{
"DT_RowId": "row_15",
"client_name": "Tatyana",
"client_sirname": "Fitzpatrick",
"employer_post": "Regional hod",
"email": "[email protected]",
"roomname": "Austrialiya",
"uniqfund": "1965",
"experiance": "19",
"bonusext": "385750",
"start_date": "2018-03-17"
},
{
"DT_RowId": "row_16",
"client_name": "Michael",
"client_sirname": "Silva",
"employer_post": "management Designer",
"email": "[email protected]",
"roomname": "Austrialiya",
"uniqfund": "1581",
"experiance": "66",
"bonusext": "198500",
"start_date": "2021-11-27"
},
{
"DT_RowId": "row_17",
"client_name": "Paul",
"client_sirname": "Byrd",
"employer_post": "Main Financial roomnamer (CFO)",
"email": "[email protected]",
"roomname": "India",
"uniqfund": "3059",
"experiance": "64",
"bonusext": "748000",
"start_date": "2018-06-09"
},
{
"DT_RowId": "row_18",
"client_name": "Gloria",
"client_sirname": "Little",
"employer_post": "Systems Administrator",
"email": "[email protected]",
"roomname": "India",
"uniqfund": "1721",
"experiance": "59",
"bonusext": "237500",
"start_date": "2022-04-10"
},
{
"DT_RowId": "row_19",
"client_name": "Bradley",
"client_sirname": "Greer",
"employer_post": "Software Engineer",
"email": "[email protected]",
"roomname": "Austrialiya",
"uniqfund": "2558",
"experiance": "41",
"bonusext": "132000",
"start_date": "2021-10-13"
},
{
"DT_RowId": "row_20",
"client_name": "Dai",
"client_sirname": "Rios",
"employer_post": "Personnel Lead",
"email": "[email protected]",
"roomname": "Edinburgh",
"uniqfund": "2290",
"experiance": "35",
"bonusext": "217500",
"start_date": "2021-09-26"
},
{
"DT_RowId": "row_21",
"client_name": "Jenette",
"client_sirname": "Caldwell",
"employer_post": "Development Lead",
"email": "[email protected]",
"roomname": "India",
"uniqfund": "1937",
"experiance": "30",
"bonusext": "345000",
"start_date": "2025-09-03"
},
{
"DT_RowId": "row_22",
"client_name": "Yuri",
"client_sirname": "Berry",
"employer_post": "Main management roomnamer (CMO)",
"email": "[email protected]",
"roomname": "India",
"uniqfund": "6154",
"experiance": "40",
"bonusext": "675000",
"start_date": "2022-06-25"
},
{
"DT_RowId": "row_23",
"client_name": "Caesar",
"client_sirname": "Vance",
"employer_post": "Pre-Sales Support",
"email": "[email protected]",
"roomname": "India",
"uniqfund": "8330",
"experiance": "21",
"bonusext": "106450",
"start_date": "2025-12-12"
},
{
"DT_RowId": "row_24",
"client_name": "Doris",
"client_sirname": "Wilder",
"employer_post": "Sales Assistant",
"email": "[email protected]",
"roomname": "Sidney",
"uniqfund": "3023",
"experiance": "23",
"bonusext": "85600",
"start_date": "2018-09-20"
},
{
"DT_RowId": "row_25",
"client_name": "Angelica",
"client_sirname": "Ramos",
"employer_post": "Main Executive roomnamer (CEO)",
"email": "[email protected]",
"roomname": "Austrialiya",
"uniqfund": "5797",
"experiance": "47",
"bonusext": "1200000",
"start_date": "2022-10-09"
},
{
"DT_RowId": "row_26",
"client_name": "Gavin",
"client_sirname": "Joyce",
"employer_post": "Developer",
"email": "[email protected]",
"roomname": "Edinburgh",
"uniqfund": "8822",
"experiance": "42",
"bonusext": "92575",
"start_date": "2018-12-22"
},
{
"DT_RowId": "row_27",
"client_name": "Jennifer",
"client_sirname": "Chang",
"employer_post": "Regional hod",
"email": "[email protected]",
"roomname": "konkat",
"uniqfund": "9239",
"experiance": "28",
"bonusext": "357650",
"start_date": "2018-11-14"
},
{
"DT_RowId": "row_28",
"client_name": "Brenden",
"client_sirname": "Wagner",
"employer_post": "Software Engineer",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "1314",
"experiance": "28",
"bonusext": "206850",
"start_date": "2025-06-07"
},
{
"DT_RowId": "row_29",
"client_name": "Fiona",
"client_sirname": "Green",
"employer_post": "Main Operating roomnamer (COO)",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "2947",
"experiance": "48",
"bonusext": "850000",
"start_date": "2018-03-11"
},
{
"DT_RowId": "row_30",
"client_name": "Shou",
"client_sirname": "Itou",
"employer_post": "Regional management",
"email": "[email protected]",
"roomname": "Tokyo",
"uniqfund": "8899",
"experiance": "20",
"bonusext": "163000",
"start_date": "2025-08-14"
},
{
"DT_RowId": "row_31",
"client_name": "Michelle",
"client_sirname": "House",
"employer_post": "Integration Specialist",
"email": "[email protected]",
"roomname": "Sidney",
"uniqfund": "2769",
"experiance": "37",
"bonusext": "95400",
"start_date": "2025-06-02"
},
{
"DT_RowId": "row_32",
"client_name": "Suki",
"client_sirname": "Burks",
"employer_post": "Developer",
"email": "[email protected]",
"roomname": "Austrialiya",
"uniqfund": "6832",
"experiance": "53",
"bonusext": "114500",
"start_date": "2022-10-22"
},
{
"DT_RowId": "row_33",
"client_name": "Prescott",
"client_sirname": "Bartlett",
"employer_post": "Technical Author",
"email": "[email protected]",
"roomname": "Austrialiya",
"uniqfund": "3606",
"experiance": "27",
"bonusext": "145000",
"start_date": "2025-05-07"
},
{
"DT_RowId": "row_34",
"client_name": "Gavin",
"client_sirname": "Cortez",
"employer_post": "project Leader",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "2860",
"experiance": "22",
"bonusext": "235500",
"start_date": "2019-10-26"
},
{
"DT_RowId": "row_35",
"client_name": "Martena",
"client_sirname": "Mccray",
"employer_post": "Post-Sales support",
"email": "[email protected]",
"roomname": "Edinburgh",
"uniqfund": "8240",
"experiance": "46",
"bonusext": "324050",
"start_date": "2025-03-09"
},
{
"DT_RowId": "row_36",
"client_name": "Unity",
"client_sirname": "Butler",
"employer_post": "management Designer",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "5384",
"experiance": "47",
"bonusext": "85675",
"start_date": "2022-12-09"
},
{
"DT_RowId": "row_37",
"client_name": "Howard",
"client_sirname": "Hatfield",
"employer_post": "roomname Manexperiancer",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "7031",
"experiance": "51",
"bonusext": "164500",
"start_date": "2019-12-16"
},
{
"DT_RowId": "row_38",
"client_name": "Hope",
"client_sirname": "Fuentes",
"employer_post": "Secretary",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "6318",
"experiance": "41",
"bonusext": "109850",
"start_date": "2018-02-12"
},
{
"DT_RowId": "row_39",
"client_name": "Vivian",
"client_sirname": "Harrell",
"employer_post": "Financial Controller",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "9422",
"experiance": "62",
"bonusext": "454800",
"start_date": "2022-02-14"
},
{
"DT_RowId": "row_40",
"client_name": "Timothy",
"client_sirname": "deepak",
"employer_post": "roomname Manexperiancer",
"email": "[email protected]",
"roomname": "Austrialiya",
"uniqfund": "7580",
"experiance": "37",
"bonusext": "136200",
"start_date": "2019-12-11"
},
{
"DT_RowId": "row_41",
"client_name": "Jackson",
"client_sirname": "Bradshaw",
"employer_post": "hod",
"email": "[email protected]",
"roomname": "India",
"uniqfund": "1042",
"experiance": "65",
"bonusext": "645750",
"start_date": "2019-09-26"
},
{
"DT_RowId": "row_42",
"client_name": "Olivia",
"client_sirname": "Liang",
"employer_post": "Support Engineer",
"email": "[email protected]",
"roomname": "konkat",
"uniqfund": "2120",
"experiance": "64",
"bonusext": "234500",
"start_date": "2025-02-03"
},
{
"DT_RowId": "row_43",
"client_name": "Bruno",
"client_sirname": "Nash",
"employer_post": "Software Engineer",
"email": "[email protected]",
"roomname": "Austrialiya",
"uniqfund": "6222",
"experiance": "38",
"bonusext": "163500",
"start_date": "2025-05-03"
},
{
"DT_RowId": "row_44",
"client_name": "Sakura",
"client_sirname": "Yamamoto",
"employer_post": "Support Engineer",
"email": "[email protected]",
"roomname": "Tokyo",
"uniqfund": "9383",
"experiance": "37",
"bonusext": "139575",
"start_date": "2022-08-19"
},
{
"DT_RowId": "row_45",
"client_name": "Thor",
"client_sirname": "Walton",
"employer_post": "Developer",
"email": "[email protected]",
"roomname": "India",
"uniqfund": "8327",
"experiance": "61",
"bonusext": "98540",
"start_date": "2020-08-11"
},
{
"DT_RowId": "row_46",
"client_name": "Finn",
"client_sirname": "Camacho",
"employer_post": "Support Engineer",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "2927",
"experiance": "47",
"bonusext": "87500",
"start_date": "2022-07-07"
},
{
"DT_RowId": "row_47",
"client_name": "Serge",
"client_sirname": "Baldwin",
"employer_post": "Data Coordinator",
"email": "[email protected]",
"roomname": "konkat",
"uniqfund": "8352",
"experiance": "64",
"bonusext": "138575",
"start_date": "2021-04-09"
},
{
"DT_RowId": "row_48",
"client_name": "Zenaida",
"client_sirname": "Frank",
"employer_post": "Software Engineer",
"email": "[email protected]",
"roomname": "India",
"uniqfund": "7439",
"experiance": "63",
"bonusext": "125480",
"start_date": "2018-01-04"
},
{
"DT_RowId": "row_49",
"client_name": "Zorita",
"client_sirname": "Serrano",
"employer_post": "Software Engineer",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "4389",
"experiance": "56",
"bonusext": "115000",
"start_date": "2021-06-01"
},
{
"DT_RowId": "row_50",
"client_name": "Jennifer",
"client_sirname": "Acosta",
"employer_post": "Junior Javascript Developer",
"email": "[email protected]",
"roomname": "Edinburgh",
"uniqfund": "3431",
"experiance": "43",
"bonusext": "75650",
"start_date": "2020-02-01"
},
{
"DT_RowId": "row_51",
"client_name": "Cara",
"client_sirname": "Stevens",
"employer_post": "Sales Assistant",
"email": "[email protected]",
"roomname": "India",
"uniqfund": "3990",
"experiance": "46",
"bonusext": "145600",
"start_date": "2025-12-06"
},
{
"DT_RowId": "row_52",
"client_name": "Hermione",
"client_sirname": "Butler",
"employer_post": "Regional hod",
"email": "[email protected]",
"roomname": "Austrialiya",
"uniqfund": "1016",
"experiance": "47",
"bonusext": "356480",
"start_date": "2025-03-21"
},
{
"DT_RowId": "row_53",
"client_name": "Lael",
"client_sirname": "Greer",
"employer_post": "Systems Administrator",
"email": "[email protected]",
"roomname": "Austrialiya",
"uniqfund": "6733",
"experiance": "21",
"bonusext": "103500",
"start_date": "2022-02-27"
},
{
"DT_RowId": "row_54",
"client_name": "Jonas",
"client_sirname": "Alexander",
"employer_post": "Developer",
"email": "[email protected]",
"roomname": "San india",
"uniqfund": "8196",
"experiance": "30",
"bonusext": "86500",
"start_date": "2018-07-14"
},
{
"DT_RowId": "row_55",
"client_name": "Shad",
"client_sirname": "Decker",
"employer_post": "Regional hod",
"email": "[email protected]",
"roomname": "Edinburgh",
"uniqfund": "6373",
"experiance": "51",
"bonusext": "183000",
"start_date": "2019-11-13"
},
{
"DT_RowId": "row_56",
"client_name": "Michael",
"client_sirname": "Bruce",
"employer_post": "Javascript Developer",
"email": "[email protected]",
"roomname": "konkat",
"uniqfund": "5384",
"experiance": "29",
"bonusext": "183000",
"start_date": "2025-06-27"
},
{
"DT_RowId": "row_57",
"client_name": "Donna",
"client_sirname": "Snider",
"employer_post": "Customer Support",
"email": "[email protected]",
"roomname": "India",
"uniqfund": "4226",
"experiance": "27",
"bonusext": "112000",
"start_date": "2025-01-25"
}
],
"options": [],
"files": []
}