Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
    <title>Editor example - Basic initialisation</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.17/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="../resources/demo.css">
    <style type="text/css" class="init">
    
    </style>
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.17/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js"></script>
    <script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
    <script type="text/javascript" language="javascript" class="init">
    
​
​
var editor; // use a global for the submit and return data rendering in the examples
​
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "/api/staff",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name",
type:  "textarea",
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );
​
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "/api/staff",
        columns: [
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.first_name+' '+data.last_name;
            } },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );
​
​
​
    </script>
</head>
<body class="dt-example node">
    <div class="container">
        <section>
            <h1>Editor example <span>Basic initialisation</span></h1>
            <div class="info">
                <p><a href="//editor.datatables.net">Editor</a> is a Create, Read, Update and Delete (CRUD) extension for <a href="//datatables.net">DataTables</a> that provides
                the ability to easily add, edit and delete rows on a database that is displayed by a DataTable. Editor provides a clean and responsive interface for end user
                manipulation of data, an expressive API for complete control and a well defined server communications protocol for data submission.</p>
                <p>This simple example shows a table with seven fields, each of which can be edited as plain text. In other examples we will explore how to add date pickers,
                <code class="tag" title="HTML tag">select</code> elements and other controls to make form input intuitive for the system user, among many other aspects of the
                Editor API.</p>
            </div>
            <div class="demo-html"></div>
            <table id="example" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Extn.</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Extn.</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
            <ul class="tabs">
                <li class="active">Javascript</li>
                <li>HTML</li>
                <li>CSS</li>
                <li>Ajax</li>
                <li>Server-side script</li>
            </ul>
            <div class="tabs">
                <div class="js">
                    <p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples
​
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: &quot;/api/staff&quot;,
        table: &quot;#example&quot;,
        fields: [ {
                label: &quot;First name:&quot;,
                name: &quot;first_name&quot;
            }, {
                label: &quot;Last name:&quot;,
                name: &quot;last_name&quot;
            }, {
                label: &quot;Position:&quot;,
                name: &quot;position&quot;
            }, {
                label: &quot;Office:&quot;,
                name: &quot;office&quot;
            }, {
                label: &quot;Extension:&quot;,
                name: &quot;extn&quot;
            }, {
                label: &quot;Start date:&quot;,
                name: &quot;start_date&quot;,
                type: &quot;datetime&quot;
            }, {
                label: &quot;Salary:&quot;,
                name: &quot;salary&quot;
            }
        ]
    } );
​
    $('#example').DataTable( {
        dom: &quot;Bfrtip&quot;,
        ajax: &quot;/api/staff&quot;,
        columns: [
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.first_name+' '+data.last_name;
            } },
            { data: &quot;position&quot; },
            { data: &quot;office&quot; },
            { data: &quot;extn&quot; },
            { data: &quot;start_date&quot; },
            { data: &quot;salary&quot;, render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,
        buttons: [
            { extend: &quot;create&quot;, editor: editor },
            { extend: &quot;edit&quot;,   editor: editor },
            { extend: &quot;remove&quot;, editor: editor }
        ]
    } );
} );</code>
                    <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
                    <ul>
                        <li>
                            <a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
                        </li>
                        <li>
                            <a href="https://cdn.datatables.net/1.10.17/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.17/js/jquery.dataTables.min.js</a>
                        </li>
                        <li>
                            <a href=
                            "https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js</a>
                        </li>
                        <li>
                            <a href="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js</a>
                        </li>
                        <li>
                            <a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
                        </li>
                    </ul>
                </div>
                <div class="table">
                    <p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
                </div>
                <div class="css">
                    <div>
                        <p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
                        additional CSS used is shown below:</p><code class="multiline language-css"></code>
                    </div>
                    <p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
                    <ul>
                        <li>
                            <a href="https://cdn.datatables.net/1.10.17/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.17/css/jquery.dataTables.min.css</a>
                        </li>
                        <li>
                            <a href=
                            "https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css</a>
                        </li>
                        <li>
                            <a href=
                            "https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css</a>
                        </li>
                        <li>
                            <a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
                        </li>
                    </ul>
                </div>
                <div class="ajax">
                    <p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
                    loaded.</p>
                </div>
                <div class="php">
                    <p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
                    processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
                    documentation</a>.</p>
                </div>
            </div>
        </section>
    </div>
    <section>
        <div class="footer">
            <div class="gradient"></div>
            <div class="liner">
                <h2>Other examples</h2>
                <div class="toc">
                    <div class="toc-group">
                        <h3><a href="./index.html">Simple initialisation</a></h3>
                        <ul class="toc active">
                            <li class="active">
                                <a href="./simple.html">Basic initialisation</a>
                            </li>
                            <li>
                                <a href="./multiRow.html">Multi-row editing</a>
                            </li>
                            <li>
                                <a href="./fieldTypes.html">Field types</a>
                            </li>
                            <li>
                                <a href="./fieldDefaults.html">Setting defaults</a>
                            </li>
                            <li>
                                <a href="./noAjax.html">Local table editing</a>
                            </li>
                            <li>
                                <a href="./i18n.html">Internationalisation</a>
                            </li>
                            <li>
                                <a href="./inTableControls.html">In table form controls</a>
                            </li>
                            <li>
                                <a href="./server-side-processing.html">Server-side processing</a>
                            </li>
                            <li>
                                <a href="./template.html">Custom form layout / templates (tags)</a>
                            </li>
                            <li>
                                <a href="./template-attribute.html">Custom form layout / templates (attributes)</a>
                            </li>
                            <li>
                                <a href="./join.html">Join tables - working with multiple SQL tables</a>
                            </li>
                        </ul>
                    </div>
                    <div class="toc-group">
                        <h3><a href="../advanced/index.html">Advanced initialisation</a></h3>
                        <ul class="toc">
                            <li>
                                <a href="../advanced/formOnlyData.html">Data shown only in the form</a>
                            </li>
                            <li>
                                <a href="../advanced/tableOnlyData.html">Data shown in table only</a>
                            </li>
                            <li>
                                <a href="../advanced/multiItem.html">Multi-item editing (rows, columns, cells)</a>
                            </li>
                            <li>
                                <a href="../advanced/REST.html">REST interface</a>
                            </li>
                            <li>
                                <a href="../advanced/deepObjects.html">Complex (nested) JSON data source</a>
                            </li>
                            <li>
                                <a href="../advanced/localstorage.html">Ajax override - using localStorage for the data source</a>
                            </li>
                            <li>
                                <a href="../advanced/jsonId.html">Row ID source specification</a>
                            </li>
                            <li>
                                <a href="../advanced/compoundKey.html">Compound database primary key</a>
                            </li>
                            <li>
                                <a href="../advanced/htmlTable.html">DOM sourced table</a>
                            </li>
                            <li>
                                <a href="../advanced/joinSelf.html">Join tables - self referencing join</a>
                            </li>
                            <li>
                                <a href="../advanced/joinLinkTable.html">Join tables - link table</a>
                            </li>
                            <li>
                                <a href="../advanced/joinArray.html">Join tables - one-to-many join</a>
                            </li>
                            <li>
                                <a href="../advanced/upload.html">File upload</a>
                            </li>
                            <li>
                                <a href="../advanced/upload-many.html">File upload (many)</a>
                            </li>
                        </ul>
                    </div>
                    <div class="toc-group">
                        <h3><a href="../extensions/index.html">DataTables extensions</a></h3>
                        <ul class="toc">
                            <li>
                                <a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
                            </li>
                            <li>
                                <a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
                            </li>
                            <li>
                                <a href="../extensions/excel.html">AutoFill and KeyTable together</a>
                            </li>
                            <li>
                                <a href="../extensions/exportButtons.html">Export buttons</a>
                            </li>
                            <li>
                                <a href="../extensions/responsive.html">Responsive table extension</a>
                            </li>
                            <li>
                                <a href="../extensions/rowReorder.html">Row reordering</a>
                            </li>
                        </ul>
                    </div>
                    <div class="toc-group">
                        <h3><a href="../dates/index.html">Dates and time</a></h3>
                        <ul class="toc">
                            <li>
                                <a href="../dates/dates.html">Date picker</a>
                            </li>
                            <li>
                                <a href="../dates/formatting.html">Formatted dates</a>
                            </li>
                            <li>
                                <a href="../dates/datetime.html">Date and time input</a>
                            </li>
                            <li>
                                <a href="../dates/time.html">Time inputs</a>
                            </li>
                            <li>
                                <a href="../dates/time-increment.html">Time increment options</a>
                            </li>
                            <li>
                                <a href="../dates/options-min-max.html">Options - min and max dates</a>
                            </li>
                            <li>
                                <a href="../dates/options-week-numbers.html">Options - week numbers</a>
                            </li>
                            <li>
                                <a href="../dates/options-disable-days.html">Options - disable days</a>
                            </li>
                            <li>
                                <a href="../dates/i18n.html">Internationalisation</a>
                            </li>
                            <li>
                                <a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
                            </li>
                            <li>
                                <a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
                            </li>
                            <li>
                                <a href="../dates/html5.html">HTML5 date input</a>
                            </li>
                        </ul>
                    </div>
                    <div class="toc-group">
                        <h3><a href="../inline-editing/index.html">Inline editing</a></h3>
                        <ul class="toc">
                            <li>
                                <a href="../inline-editing/simple.html">Simple inline editing</a>
                            </li>
                            <li>
                                <a href="../inline-editing/tabControl.html">Tab between columns</a>
                            </li>
                            <li>
                                <a href="../inline-editing/options.html">Editing options - submit on blur</a>
                            </li>
                            <li>
                                <a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
                            </li>
                            <li>
                                <a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
                            </li>
                            <li>
                                <a href="../inline-editing/editIcon.html">Edit icon</a>
                            </li>
                            <li>
                                <a href="../inline-editing/join.html">Joined tables</a>
                            </li>
                            <li>
                                <a href="../inline-editing/responsive.html">Responsive integration</a>
                            </li>
                            <li>
                                <a href="../inline-editing/columns.html">Selected columns only</a>
                            </li>
                            <li>
                                <a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
                            </li>
                            <li>
                                <a href="../inline-editing/serverSide.html">Server-side processing</a>
                            </li>
                        </ul>
                    </div>
                    <div class="toc-group">
                        <h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
                        <ul class="toc">
                            <li>
                                <a href="../bubble-editing/simple.html">Simple bubble editing</a>
                            </li>
                            <li>
                                <a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
                            </li>
                            <li>
                                <a href="../bubble-editing/options.html">Form control and display options</a>
                            </li>
                            <li>
                                <a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
                            </li>
                            <li>
                                <a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
                            </li>
                        </ul>
                    </div>
                    <div class="toc-group">
                        <h3><a href="../api/index.html">API</a></h3>
                        <ul class="toc">
                            <li>
                                <a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
                            </li>
                            <li>
                                <a href="../api/dependentFields.html">Dependent fields</a>
                            </li>
                            <li>
                                <a href="../api/clientValidation.html">Client-side validation</a>
                            </li>
                            <li>
                                <a href="../api/triggerButton.html">Customised control buttons</a>
                            </li>
                            <li>
                                <a href="../api/backNext.html">Previous / next editing buttons</a>
                            </li>
                            <li>
                                <a href="../api/cancelButton.html">Cancel button</a>
                            </li>
                            <li>
                                <a href="../api/checkbox.html">Always shown checkbox</a>
                            </li>
                            <li>
                                <a href="../api/softDelete.html">Soft delete</a>
                            </li>
                            <li>
                                <a href="../api/duplicateButton.html">Duplicate button</a>
                            </li>
                            <li>
                                <a href="../api/removeMessage.html">Custom delete / remove message</a>
                            </li>
                        </ul>
                    </div>
                    <div class="toc-group">
                        <h3><a href="../standalone/index.html">Standalone</a></h3>
                        <ul class="toc">
                            <li>
                                <a href="../standalone/simple.html">Simple standalone editing</a>
                            </li>
                            <li>
                                <a href="../standalone/bubble.html">Bubble editing</a>
                            </li>
                            <li>
                                <a href="../standalone/inline.html">Inline editing</a>
                            </li>
                            <li>
                                <a href="../standalone/collection.html">Standalone collection editor</a>
                            </li>
                        </ul>
                    </div>
                    <div class="toc-group">
                        <h3><a href="../styling/index.html">Styling</a></h3>
                        <ul class="toc">
                            <li>
                                <a href="../styling/bootstrap.html">Bootstrap 3</a>
                            </li>
                            <li>
                                <a href="../styling/bootstrap4.html">Bootstrap 4</a>
                            </li>
                            <li>
                                <a href="../styling/foundation.html">Foundation</a>
                            </li>
                            <li>
                                <a href="../styling/semanticui.html">Semantic UI</a>
                            </li>
                            <li>
                                <a href="../styling/jqueryui.html">jQuery UI</a>
                            </li>
                            <li>
                                <a href="../styling/fieldDisplay.html">Field display styling options</a>
                            </li>
                            <li>
                                <a href="../styling/columns.html">Multi-column layout</a>
                            </li>
                            <li>
                                <a href="../styling/large.html">Large window layout</a>
                            </li>
                            <li>
                                <a href="../styling/stackedInputs.html">Stacked inputs</a>
                            </li>
                            <li>
                                <a href="../styling/envelope.html">Envelope display controller</a>
                            </li>
                            <li>
                                <a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
                            </li>
                            <li>
                                <a href="../styling/template.html">Custom form layout / templates</a>
                            </li>
                        </ul>
                    </div>
                    <div class="toc-group">
                        <h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
                        <ul class="toc">
                            <li>
                                <a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
                            </li>
                            <li>
                                <a href="../plug-ins/displayController.html">Custom display controller</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="epilogue">
                    <p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
                    Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
                    "http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
                    <p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
                    DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
                </div>
            </div>
        </div>
    </section>
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers