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

Example


Related FAQ

Here are some more FAQ related to this Article:

  1.   Simple Print PHP Hello World program From scratch
  2.   Browser window resize function with AngularJS
  3.   JavaScript Remove Object from Array
  4.   how to call helper function in codeigniter view
  5.   Custom Filter using Angular Example
  6.   Simple Tooltip Component with CSS and Vuejs
  7.   updated_option Wordpress hook details - WORDPRESS ACTION HOOKS
  8.   Form Validation with Class using Angular Example
  9.   jQuery Ajax Bootstrap Table Pagination using PHP MySQLi
  10.   Laravel 5.7 Routing Required Parameter