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>

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

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

  crud with php oop and mvc design pattern

Related FAQ

Here are some more FAQ related to this Article:

  1.   GET Facebook friends list email mobile profile url using Facebook Graph API
  2.   Elementor cpt select Integration
  3.   jQuery Mobile Based Slide Swipeable Side Menu
  4.   Check Uncheck All Checkbox using ReactJS
  5.   Simple Vue 2.0 Hello World Example
  6.   Uppercase Filter using Angular Example
  7.   ERROR 1118 (42000) Row size too large
  8.   How to add Ajax loader image in PHP?
  9.   AngularJS Fancybox Popup Simple Example
  10.   Check Uncheck All Checkbox using ReactJS

Leave a Reply

Your email address will not be published. Required fields are marked *