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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/v/bs5/dt-2.0.5/b-3.0.2/date-1.5.2/sl-2.0.1/datatables.min.css" rel="stylesheet">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/dt-2.0.5/b-3.0.2/date-1.5.2/sl-2.0.1/datatables.min.js"></script>
    
    <link href="https://editor.datatables.net/extensions/Editor/css/editor.bootstrap5.css" rel="stylesheet" type="text/css" />
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script src="https://editor.datatables.net/extensions/Editor/js/editor.bootstrap5.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="table table-striped" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Start date</th>
            <th>xml original</th>
            <th>xml modified</th>
          </tr>
        </thead>
​
​
        <tbody>
          <tr id="1">
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>2011/04/25</td>
            <td>
              <textarea>
<style type="text/css">email
            * {font-family:Verdana; font-size:11px;}
            table {border:1px solid #888888;width: 100%;table-layout: auto;margin:0;}
            td, th {border:1px solid #888888; padding:2px 7px 2px 7px;} 
         
            .err {background-color:#ffcccc;}
            .errhead {background-color:#ccffcc;}
            .disk {background-color:#fff0aa;}
            .nonDel {background-color:#ff0000;}
            </style>
              </textarea>
            </td>
            <td>
              <textarea>text
              </textarea>
            </td>
          </tr>
        </tbody>
      </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
 
$(document).ready(function() {
  var editor = new $.fn.dataTable.Editor({
    table: '#example',
    formOptions: {
      inline: {
        submit: 'changed',
        onBlur: 'none',
      }
    },
    fields:
    [
      {
        "label":"Name",
        "name":"name",
      },
      {
        "label":"Position",
        "name":"position",
      },
      {
        "label":"Office",
        "name":"office",
      },
      {
        "label":"xml",
        "name":"xml",
        "nullDefault":true,
        "type":"textarea"
      },
      {
        "label":"xml",
        "name":"xml1",
        "nullDefault":true,
        "type":"textarea"
      }
    ],
  });
​
  var table = $("#example").DataTable({
    columns: [
      { data: "name" },
      { data: "position" },
      { data: "office" },
      { data: "xml",
       render: function (data, type, row) {
         console.log(type + ': ' + data);
         return data;
       }
      },
      { data: "xml1" },
    ],
​
  });
      
  console.log('\nDatatables data cache:');
  console.log(table.settings()[0].aoData[0]._aData.xml)
​
  editor.on('preSubmit', function (e, data, action) {
    console.log(data.data['1']);
    console.log( table.row( 0 ).data().xml );
    return false;
  });
​
  table.on('click', 'tbody td', function (e) {
    editor.inline(this);
  });
​
});
1 error
Line 56: Missing semicolon.
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers