File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.2/css/bulma.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bm/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bm/dt-1.12.1/b-2.2.3/date-1.1.2/sl-1.4.0/datatables.min.js"></script>
​
    <link href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
<table id="example" class="table is-striped" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Location</th>
                <th>Phone #</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Location</th>
                <th>Phone #</th>
            </tr>
        </tfoot>
    </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
​
/*
.DTE_Field_InputControl select {
  width: 100%;
}
*/
JavaScriptSaved
 
$(document).ready(function() {
  var data = {
  "data": [
    {
      "DT_RowId": "row_1",
      "users": {
        "first_name": "Quynn",
        "last_name": "Contreras",
        "phone": "1-971-977-4681",
        "site": "1"
      },
      "sites": {
        "name": "Edinburgh"
      }
    },
    {
      "DT_RowId": "row_2",
      "users": {
        "first_name": "Kaitlin",
        "last_name": "Smith",
        "phone": "1-436-523-6103",
        "site": "2"
      },
      "sites": {
        "name": "London"
      }
    },
    {
      "DT_RowId": "row_3",
      "users": {
        "first_name": "Cruz",
        "last_name": "Reynolds",
        "phone": "1-776-102-6352",
        "site": "3"
      },
      "sites": {
        "name": "Paris"
      }
    },
    {
      "DT_RowId": "row_4",
      "users": {
        "first_name": "Sophia",
        "last_name": "Morris",
        "phone": "1-463-224-1405",
        "site": "4"
      },
      "sites": {
        "name": "New York"
      }
    },
    {
      "DT_RowId": "row_5",
      "users": {
        "first_name": "Kamal",
        "last_name": "Roberson",
        "phone": "1-134-408-5227",
        "site": "5"
      },
      "sites": {
        "name": "Singapore"
      }
    },
    {
      "DT_RowId": "row_6",
      "users": {
        "first_name": "Dustin",
        "last_name": "Rosa",
        "phone": "1-875-919-3188",
        "site": "6"
      },
      "sites": {
        "name": "Los Angeles"
      }
    },
    {
      "DT_RowId": "row_7",
      "users": {
        "first_name": "Xantha",
        "last_name": "George",
        "phone": "1-106-884-4754",
        "site": "1"
      },
      "sites": {
        "name": "Edinburgh"
      }
    },
    {
      "DT_RowId": "row_8",
      "users": {
        "first_name": "Bryar",
        "last_name": "Long",
        "phone": "1-918-114-8083",
        "site": "2"
      },
      "sites": {
        "name": "London"
      }
    },
    {
      "DT_RowId": "row_9",
      "users": {
        "first_name": "Kuame",
        "last_name": "Wynn",
        "phone": "1-101-692-4039",
        "site": "3"
      },
      "sites": {
        "name": "Paris"
      }
    },
    {
      "DT_RowId": "row_10",
      "users": {
        "first_name": "Indigo",
        "last_name": "Brennan",
        "phone": "1-756-756-8161",
        "site": "4"
      },
      "sites": {
        "name": "New York"
      }
    },
    {
      "DT_RowId": "row_11",
      "users": {
        "first_name": "Avram",
        "last_name": "Allison",
        "phone": "1-751-507-2640",
        "site": "5"
      },
      "sites": {
        "name": "Singapore"
      }
    },
    {
      "DT_RowId": "row_12",
      "users": {
        "first_name": "Martha",
        "last_name": "Burgess",
        "phone": "1-971-722-1203",
        "site": "6"
      },
      "sites": {
        "name": "Los Angeles"
      }
    },
    {
      "DT_RowId": "row_13",
      "users": {
        "first_name": "Lael",
        "last_name": "Kim",
        "phone": "1-626-697-2194",
        "site": "1"
      },
      "sites": {
        "name": "Edinburgh"
      }
    },
    {
      "DT_RowId": "row_14",
      "users": {
        "first_name": "Lyle",
        "last_name": "Lewis",
        "phone": "1-231-793-3520",
        "site": "2"
      },
      "sites": {
        "name": "London"
      }
    },
    {
      "DT_RowId": "row_15",
      "users": {
        "first_name": "Veronica",
        "last_name": "Marks",
        "phone": "1-750-981-6759",
        "site": "3"
      },
      "sites": {
        "name": "Paris"
      }
    },
    {
      "DT_RowId": "row_16",
      "users": {
        "first_name": "Wynne",
        "last_name": "Ruiz",
        "phone": "1-983-744-5362",
        "site": "4"
      },
      "sites": {
        "name": "New York"
      }
    },
    {
      "DT_RowId": "row_17",
      "users": {
        "first_name": "Jessica",
        "last_name": "Bryan",
        "phone": "1-949-932-6772",
        "site": "5"
      },
      "sites": {
        "name": "Singapore"
      }
    },
    {
      "DT_RowId": "row_18",
      "users": {
        "first_name": "Quinlan",
        "last_name": "Hyde",
        "phone": "1-625-664-6072",
        "site": "6"
      },
      "sites": {
        "name": "Los Angeles"
      }
    },
    {
      "DT_RowId": "row_19",
      "users": {
        "first_name": "Mona",
        "last_name": "Terry",
        "phone": "1-443-179-7343",
        "site": "1"
      },
      "sites": {
        "name": "Edinburgh"
      }
    },
    {
      "DT_RowId": "row_20",
      "users": {
        "first_name": "Medge",
        "last_name": "Patterson",
        "phone": "1-636-979-0497",
        "site": "2"
      },
      "sites": {
        "name": "London"
      }
    },
    {
      "DT_RowId": "row_21",
      "users": {
        "first_name": "Perry",
        "last_name": "Gamble",
        "phone": "1-440-976-9560",
        "site": "3"
      },
      "sites": {
        "name": "Paris"
      }
    },
    {
      "DT_RowId": "row_22",
      "users": {
        "first_name": "Pandora",
        "last_name": "Armstrong",
        "phone": "1-197-431-4390",
        "site": "4"
      },
      "sites": {
        "name": "New York"
      }
    },
    {
      "DT_RowId": "row_23",
      "users": {
        "first_name": "Pandora",
        "last_name": "Briggs",
        "phone": "1-278-288-9221",
        "site": "5"
      },
      "sites": {
        "name": "Singapore"
      }
    },
    {
      "DT_RowId": "row_24",
      "users": {
        "first_name": "Maris",
        "last_name": "Leblanc",
        "phone": "1-936-114-2921",
        "site": "6"
      },
      "sites": {
        "name": "Los Angeles"
      }
    },
    {
      "DT_RowId": "row_25",
      "users": {
        "first_name": "Ishmael",
        "last_name": "Crosby",
        "phone": "1-307-243-2684",
        "site": "1"
      },
      "sites": {
        "name": "Edinburgh"
      }
    },
    {
      "DT_RowId": "row_26",
      "users": {
        "first_name": "Quintessa",
        "last_name": "Pickett",
        "phone": "1-801-122-7471",
        "site": "2"
      },
      "sites": {
        "name": "London"
      }
    },
    {
      "DT_RowId": "row_27",
      "users": {
        "first_name": "Ifeoma",
        "last_name": "Mays",
        "phone": "1-103-883-0962",
        "site": "3"
      },
      "sites": {
        "name": "Paris"
      }
    },
    {
      "DT_RowId": "row_28",
      "users": {
        "first_name": "Basia",
        "last_name": "Harrell",
        "phone": "1-528-238-4178",
        "site": "4"
      },
      "sites": {
        "name": "New York"
      }
    },
    {
      "DT_RowId": "row_29",
      "users": {
        "first_name": "Hamilton",
        "last_name": "Blackburn",
        "phone": "1-676-857-1423",
        "site": "5"
      },
      "sites": {
        "name": "Singapore"
      }
    },
    {
      "DT_RowId": "row_30",
      "users": {
        "first_name": "Dexter",
        "last_name": "Burton",
        "phone": "1-275-332-8186",
        "site": "6"
      },
      "sites": {
        "name": "Los Angeles"
      }
    },
    {
      "DT_RowId": "row_31",
      "users": {
        "first_name": "Quinn",
        "last_name": "Mccall",
        "phone": "1-808-916-4497",
        "site": "1"
      },
      "sites": {
        "name": "Edinburgh"
      }
    },
    {
      "DT_RowId": "row_32",
      "users": {
        "first_name": "Alexa",
        "last_name": "Wilder",
        "phone": "1-727-307-1997",
        "site": "2"
      },
      "sites": {
        "name": "London"
      }
    },
    {
      "DT_RowId": "row_33",
      "users": {
        "first_name": "Rhonda",
        "last_name": "Harrell",
        "phone": "1-934-906-6474",
        "site": "3"
      },
      "sites": {
        "name": "Paris"
      }
    },
    {
      "DT_RowId": "row_34",
      "users": {
        "first_name": "Jocelyn",
        "last_name": "England",
        "phone": "1-826-860-7773",
        "site": "4"
      },
      "sites": {
        "name": "New York"
      }
    },
    {
      "DT_RowId": "row_35",
      "users": {
        "first_name": "Vincent",
        "last_name": "Banks",
        "phone": "1-225-418-0941",
        "site": "5"
      },
      "sites": {
        "name": "Singapore"
      }
    },
    {
      "DT_RowId": "row_36",
      "users": {
        "first_name": "Stewart",
        "last_name": "Chan",
        "phone": "1-781-793-2340",
        "site": "6"
      },
      "sites": {
        "name": "Los Angeles"
      }
    }
  ],
  "options": {
    "users.site": [
      {
        "label": "Edinburgh",
        "value": "1"
      },
      {
        "label": "London",
        "value": "2"
      },
      {
        "label": "Los Angeles",
        "value": "6"
      },
      {
        "label": "New York",
        "value": "4"
      },
      {
        "label": "Paris",
        "value": "3"
      },
      {
        "label": "Singapore",
        "value": "5"
      }
    ]
  },
  "files": []
};
  
  var editor = new $.fn.dataTable.Editor({
    table: "#example",
    fields: [ {
      label: "First name:",
      name: "users.first_name"
    }, {
      label: "Last name:",
      name: "users.last_name"
    }, {
      label: "Phone #:",
      name: "users.phone"
    }, {
      label: "Site:",
      name: "users.site",
      type: "select",
      placeholder: "Select a location",
      options: [
      {
        "label": "Edinburgh",
        "value": "1"
      },
      {
        "label": "London",
        "value": "2"
      },
      {
        "label": "Los Angeles",
        "value": "6"
      },
      {
        "label": "New York",
        "value": "4"
      },
      {
        "label": "Paris",
        "value": "3"
      },
      {
        "label": "Singapore",
        "value": "5"
      }
    ]
    }
   ]
  });
​
  $('#example').on( 'click', 'tbody td', function (e) {
    editor.inline( this );
  } );
  
  $("#example").DataTable({
    dom: "Bfrtip",
    data: data.data,
    columns: [
      { data: "users.first_name" },
      { data: "users.last_name" },
      { data: "sites.name", 
         editField: "users.site"
      },
      { data: "users.phone" },
    ],
    select: true,
    buttons: [
      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor }
    ]
  });
  
​
​
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers