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>Item Editor</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display 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;
}
​
JavaScriptSaved
 
// Sample data with primary vendor indicator
let data = [
   {
      "itemName":"item1",
      "vendor":[
         {
            "isPrimary":true,
            "label":"vendorA",
            "value":"123"
         },
         {
            "isPrimary":false,
            "label":"vendorB",
            "value":"456"
         },
         {
            "isPrimary":false,
            "label":"vendorC",
            "value":"789"
         }
      ]
   },
   {
      "itemName":"item2",
      "vendor":[
         {
            "isPrimary":false,
            "label":"vendorB",
            "value":"456"
         },
         {
            "isPrimary":false,
            "label":"vendorC",
            "value":"789"
         },
         {
            "isPrimary":true,
            "label":"vendorD",
            "value":"012"
         }
      ]
   },
   {
      "itemName":"item3",
      "vendor":[
         {
            "isPrimary":true,
            "label":"vendorA",
            "value":"123"
         },
         {
            "isPrimary":false,
            "label":"vendorC",
            "value":"789"
         },
         {
            "isPrimary":false,
            "label":"vendorD",
            "value":"012"
         }
      ]
   }
];
​
// Initialize DataTables Editor
let editor = new $.fn.dataTable.Editor({
    table: '#example',
    fields: [
        { label: 'Item Name', name: 'itemName' },
        { 
            label: 'Selected Vendor', 
            name: 'vendor', 
            type: 'select', 
            placeholder: 'Select a vendor'
        }
    ]
});
​
​
// Initialize DataTables
let table = $('#example').DataTable({
    data: data,
    columns: [
        { data: 'itemName', title: 'Item Name' },
        { data: 'vendor', title: 'Selected Vendor',
          render: function ( data, type, row ) {
             var ix=0;
             while (row.vendor[ix]) {
               if (row.vendor[ix].isPrimary) {
                 return row.vendor[ix].label;
               }
               ix++;
             }
           }
        }
    ]
});
​
​
​
// Attach inline editing to the 'Selected Vendor' column
$('#example').on('click', 'tbody td:nth-child(2)', function () {
    // Get the row data
    var rowData = table.row(this).data();
    let vendorList = rowData.vendor;
    let primaryVendor = vendorList.find(v=>(v.isPrimary));
    // Update the editor field with the new options and set the default value to primary if available
    editor.field('vendor').update(vendorList);
    
    editor.field('vendor').def(primaryVendor || rowData.selectedVendor);
​
    // Activate inline editing
    editor.inline(this, {
        submitOnBlur: true // Save changes when the field loses focus
    });
});
6 warnings
Line 2: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 66: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 81: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 105: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 106: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 106: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers