Jquery Customised datatable Grids inline add edit delete

by
Jquery Customised datatable Grids inline add edit delete

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


Include CSS External files

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



        
            

                Name
                employer_post
                roomname
                uniqfund.
                Start date
                bonusext
            

        
        
            

                Name
                employer_post
                roomname
                uniqfund.
                Start date
                bonusext
            

        
    




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": []
}



Example





 
Related posts:
    

  1. jquery datatable inline edit example
    2. 

  2. how to add edit and delete button in datatable using php?
    3. 

  3. how to add edit and delete rows of a html table with javascript?
    4. 

  4. PHP CRUD Create, edit, update and delete Records with MySQL database
    5.

Leave a Comment