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://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://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="details" class="details nowrap" width="100%">
      
      </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;
}
​
table.details tbody td:first-child { 
    font-weight: bold;
    min-width: 20%;
    white-space: no-wrap;
}
​
table.details tbody td:nth-child(2) { 
    cursor: pointer;
}
JavaScriptSaved
 
var details, detailsEditor;
var dataset = [{"id":10277022,"field":"code","type":"text","label":"Code","value":"AE1"},
               {"id":10277022,"field":"content","type":"textarea","label":"Content","value":"Adverse events are coded into System Organ Class"}]
​
$(document).ready( function () {
  
  console.log("start");
  
  details = $('#details').DataTable( {
    paging:         false,
    lengthChange:   false,
    info:           false,
    searching:      false,
    ordering:       false,
    rowId:          "id",
    data:           dataset,
    columns: [
      { data: "label" },
      { data: "value" }
    ],
    initComplete: function( settings, json ) {
      var fields = [];
      dataset.forEach(function (data) {
        var field = { data: data.value, name: data.field, label: data.label, type: data.type };
        fields.push(field);
      });
      console.log(fields);
      detailsEditor = new $.fn.dataTable.Editor( {
        ajax: {
          create: 'blank.jsp?_response=true&_action=newFootnote',
          remove: 'blank.jsp?_response=true&_action=deleteFootnote',
        },
        table: "#details",
        idSrc: "id",
        fields: fields
      } );
    }
  } );
  
  $('#details').on( 'click', 'tbody td:nth-child(2)', function (e) {
    detailsEditor.inline( this, {
      buttons: { label: '&gt', className: 'btn-primary', fn: function () { this.submit(); } }
    } );
  } );
  console.log("end");
} );
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers