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 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>
    <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://nightly.datatables.net/select/css/select.dataTables.css?_=9a6592f8d74f8f520ff7b22342fa1183.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/select/js/dataTables.select.js?_=9a6592f8d74f8f520ff7b22342fa1183"></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="display nowrap" width="100%">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extension</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
​
      </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;
}
​
JavaScriptSaved
 
(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);
​
​
var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: {
            type: 'GET',
            url: "/ajax/objects.txt"
        },
        table: "#example",
        idSrc: "name",
        fields: [ {
                label: "Name:",
                name: "name",
                type: "autoComplete",
                opts: {
                    "source": [
                        "Ulf",
                        "Saga",
                        "Johanna",
                        "Jossefin",
                        "Ola"
                    ]
                }
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );
 
    // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td:not(:first-child )', function (e) {
        editor.inline( this, {
            onBlur: 'submit'
        } );
    } );
 
    $('#example').DataTable( {
        dom: "Bfrtip",
       ajax: {
            type: 'GET',
            url: "/ajax/objects.txt"
        },
        order: [[ 1, 'asc' ]],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "name" },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        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