File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
​
​
​
​
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <link href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
    <link href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.js"></script>
​
    
    <link href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.js"></script>
    <link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    
        
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
     <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr id="row_1">
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>$320,800</td>
            </tr>
            <tr id="row_2">
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>$170,750</td>
            </tr>
            <tr id="row_3">
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>$86,000</td>
            </tr>
            <tr id="row_4">
                <td>Cedric</td>
                <td>Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>$433,060</td>
            </tr>
            <tr id="row_5">
                <td>Airi</td>
                <td>Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>$162,700</td>
            </tr>
            <tr id="row_6">
                <td>Brielle</td>
                <td>Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>$372,000</td>
            </tr>
            <tr id="row_7">
                <td>Herrod</td>
                <td>Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>$137,500</td>
            </tr>
            <tr id="row_8">
                <td>Rhona</td>
                <td>Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>$327,900</td>
            </tr>
            <tr id="row_9">
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>$205,500</td>
            </tr>
            <tr id="row_10">
                <td>Sonya</td>
                <td>Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>$103,600</td>
            </tr>
            <tr id="row_11">
                <td>Jena</td>
                <td>Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>$90,560</td>
            </tr>
            <tr id="row_12">
                <td>Quinn</td>
                <td>Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>$342,000</td>
            </tr>
            <tr id="row_13">
                <td>Charde</td>
                <td>Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>$470,600</td>
            </tr>
            <tr id="row_14">
                <td>Haley</td>
                <td>Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>$313,500</td>
            </tr>
            <tr id="row_15">
                <td>Tatyana</td>
                <td>Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>$385,750</td>
            </tr>
            <tr id="row_16">
                <td>Michael</td>
                <td>Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>$198,500</td>
            </tr>
            <tr id="row_17">
                <td>Paul</td>
                <td>Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>$725,000</td>
            </tr>
            <tr id="row_18">
                <td>Gloria</td>
                <td>Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>$237,500</td>
            </tr>
            <tr id="row_19">
                <td>Bradley</td>
                <td>Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>$132,000</td>
            </tr>
            <tr id="row_20">
                <td>Dai</td>
                <td>Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>$217,500</td>
            </tr>
            <tr id="row_21">
                <td>Jenette</td>
                <td>Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>$345,000</td>
            </tr>
            <tr id="row_22">
                <td>Yuri</td>
                <td>Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>$675,000</td>
            </tr>
            <tr id="row_23">
                <td>Caesar</td>
                <td>Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>$106,450</td>
            </tr>
            <tr id="row_24">
                <td>Doris</td>
                <td>Wilder</td>
                <td>Sales Assistant</td>
                <td>Sydney</td>
                <td>$85,600</td>
            </tr>
            <tr id="row_25">
                <td>Angelica</td>
                <td>Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>$1,200,000</td>
            </tr>
            <tr id="row_26">
                <td>Gavin</td>
                <td>Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>$92,575</td>
            </tr>
            <tr id="row_27">
                <td>Jennifer</td>
                <td>Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>$357,650</td>
            </tr>
            <tr id="row_28">
                <td>Brenden</td>
                <td>Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>$206,850</td>
            </tr>
            <tr id="row_29">
                <td>Fiona</td>
                <td>Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>$850,000</td>
            </tr>
            <tr id="row_30">
                <td>Shou</td>
                <td>Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>$163,000</td>
            </tr>
            <tr id="row_31">
                <td>Michelle</td>
                <td>House</td>
                <td>Integration Specialist</td>
                <td>Sydney</td>
                <td>$95,400</td>
            </tr>
            <tr id="row_32">
                <td>Suki</td>
                <td>Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>$114,500</td>
            </tr>
            <tr id="row_33">
                <td>Prescott</td>
                <td>Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>$145,000</td>
            </tr>
            <tr id="row_34">
                <td>Gavin</td>
                <td>Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>$235,500</td>
            </tr>
            <tr id="row_35">
                <td>Martena</td>
                <td>Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>$324,050</td>
            </tr>
            <tr id="row_36">
                <td>Unity</td>
                <td>Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>$85,675</td>
            </tr>
            <tr id="row_37">
                <td>Howard</td>
                <td>Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>$164,500</td>
            </tr>
            <tr id="row_38">
                <td>Hope</td>
                <td>Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>$109,850</td>
            </tr>
            <tr id="row_39">
                <td>Vivian</td>
                <td>Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>$452,500</td>
            </tr>
            <tr id="row_40">
                <td>Timothy</td>
                <td>Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>$136,200</td>
            </tr>
            <tr id="row_41">
                <td>Jackson</td>
                <td>Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>$645,750</td>
            </tr>
            <tr id="row_42">
                <td>Olivia</td>
                <td>Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>$234,500</td>
            </tr>
            <tr id="row_43">
                <td>Bruno</td>
                <td>Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>$163,500</td>
            </tr>
            <tr id="row_44">
                <td>Sakura</td>
                <td>Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>$139,575</td>
            </tr>
            <tr id="row_45">
                <td>Thor</td>
                <td>Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>$98,540</td>
            </tr>
            <tr id="row_46">
                <td>Finn</td>
                <td>Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>$87,500</td>
            </tr>
            <tr id="row_47">
                <td>Serge</td>
                <td>Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>$138,575</td>
            </tr>
            <tr id="row_48">
                <td>Zenaida</td>
                <td>Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>$125,250</td>
            </tr>
            <tr id="row_49">
                <td>Zorita</td>
                <td>Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>$115,000</td>
            </tr>
            <tr id="row_50">
                <td>Jennifer</td>
                <td>Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>$75,650</td>
            </tr>
            <tr id="row_51">
                <td>Cara</td>
                <td>Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>$145,600</td>
            </tr>
            <tr id="row_52">
                <td>Hermione</td>
                <td>Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>$356,250</td>
            </tr>
            <tr id="row_53">
                <td>Lael</td>
                <td>Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>$103,500</td>
            </tr>
            <tr id="row_54">
                <td>Jonas</td>
                <td>Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>$86,500</td>
            </tr>
            <tr id="row_55">
                <td>Shad</td>
                <td>Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>$183,000</td>
            </tr>
            <tr id="row_56">
                <td>Michael</td>
                <td>Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>$183,000</td>
            </tr>
            <tr id="row_57">
                <td>Donna</td>
                <td>Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>$112,000</td>
            </tr>
        </tbody>
    </table>
    </div>
  </body>
</html>
​
​
<div id="testForm">
                    <fieldset class="name">
                        <legend>Name</legend>
                        <editor-field name="first_name"></editor-field>
                        <editor-field name="last_name"></editor-field>
                    </fieldset>
                    <fieldset class="office">
                        <legend>Office</legend>
                        <editor-field name="office"></editor-field>
                    </fieldset>
                    <fieldset class="hr">
                        <legend>HR info</legend>
                        <editor-field name="position"></editor-field>
                        
                        <editor-field name="salary"></editor-field>
                        
                    </fieldset>
                </div>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(document).ready( function () {
  
   editor = new $.fn.dataTable.Editor( {
        ajax: '../php/staff-html.php',
        table: '#example',
     template: "#testForm",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name",
              type: "autoComplete"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Salary:",
                name: "salary"               
            }
        ]
    } );
  
  editor.on( 'initEdit', function (evt, node, data) {
    editor.disable(['last_name']);
    
  });
  
  $('#example').DataTable( {
        dom: 'Bfrtip',
        columns: [
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "salary" }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );
​
​
(function ($, DataTable) {
 
 
if ( ! DataTable.ext.editorFields ) {
    DataTable.ext.editorFields = {};
}
 
var _fieldTypes = DataTable.Editor ?
    DataTable.Editor.fieldTypes :
    DataTable.ext.editorFields;
 
_fieldTypes.autoComplete = {
    create: function ( conf ) {
        conf._input = $('<input type="text" id="'+conf.id+'">')
            .autocomplete( conf.opts || {} );
 
        return conf._input[0];
    },
 
    get: function ( conf ) {
        return conf._input.val();
    },
 
    set: function ( conf, val ) {
        conf._input.val( val );
    },
 
    enable: function ( conf ) {
        conf._input.autocomplete( 'enable' );
    },
 
    disable: function ( conf ) {
        conf._input.autocomplete( 'disable' );
    },
     
    canReturnSubmit: function ( conf, node ) {
        if ( $('ul.ui-autocomplete').is(':visible') ) {
            return false;
        }
        return true;
    },
 
    owns: function ( conf, node ) {
        if ( $(node).closest('ul.ui-autocomplete').length ) {
            return true;
        }
        return false;
    },
 
    // Non-standard Editor method - custom to this plug-in
    node: function ( conf ) {
        return conf._input;
    },
 
    update: function ( conf, options ) {
        conf._input.autocomplete( 'option', 'source', options );
    }
};
 
 
})(jQuery, jQuery.fn.dataTable);
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers