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://cdn.datatables.net/select/1.7.0/css/select.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </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
 
// Formatting function for row details - modify as you need
function format(d) {
    // `d` is the original data object for the row
    return (
        '<dl>' +
        '<dt>Full name:</dt>' +
        '<dd>' +
        d.name +
        '</dd>' +
        '<dt>Extension number:</dt>' +
        '<dd>' +
        d.extn +
        '</dd>' +
        '<dt>Extra info:</dt>' +
        '<dd>And any further details here (images etc)...</dd>' +
        '</dl>'
    );
}
 
var table = $('#example').DataTable({
    ajax: '/ajax/objects.txt',
  select: true,
    columns: [
        {
            className: 'dt-control',
            orderable: false,
            data: null,
            defaultContent: ''
        },
        { data: 'name' },
        { data: 'position' },
        { data: 'office' },
        { data: 'salary' }
    ],
    order: [[1, 'asc']]
});
 
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.dt-control', function (e) {
  e.stopPropagation();
​
  var tr = $(this).closest('tr');
    var row = table.row(tr);
 
    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
    }
    else {
        // Open this row
        row.child(format(row.data())).show();
    }
});
​
$('#example').on('select.dt', function(e, dt, type, indexes) {
  e.stopPropagation();
  
                createsubItemsTableChildRow(dt);
  
});
​
function createsubItemsTableChildRow(row) {
  // This is the table we'll convert into a DataTable
  let table = $('<table id="items_hierarchy" class="hover order-column stripe" width="100%"/>');
​
  // Display the child row
  row.child(table).show();
​
  // Do not change the row selector arrow to a "down arrow."
  $(row.node()).removeClass('dt-hasChild');
​
  subitemsRowData = row.data().items;
​
  // Packaging Editor
  let subItemsEditor = new $.fn.dataTable.Editor({
    ajax: {
      type: "POST",
    ajax: '/ajax/objects.txt',
      data: function(d) {
        d.item_id = subitemsRowData.id;
      },
    },
    serverSide: true,
    formOptions: {
      main: {
        onBlur: 'none',
        onEsc: 'none'
      }
    },
    fields: [{
      type: 'hidden',
      name: 'packaging.item_id',
      default: function() {
        return itemsRowData.id;
      },
    },
             {
               label: "Name:",
               name: 'name'
             },
            ],
             table: "#example",
             }); // subItemsEditor
​
             // Initialize as a DataTable
             let subItemsTable = $('#example').DataTable({
             dom: "Bfrtip",
             order: [
             [1, 'asc'],
    [2, 'asc'],
    [3, 'asc'],
    [4, 'asc'],
    ],
    pageLength: 26,
    ajax: {
    type: "POST",
    ajax: '/ajax/objects.txt',
    data: function(d) {
    d.parent = subitemsRowData.id;
  },
                                                 dataSrc: function(json) {
    if (json.data.length > 0) {
      $('#items_hierarchy_wrapper').css("display", "block");
​
​
      // Display the child row
      row.child(table).show();
​
      // Do not change the row selector arrow to a "down arrow."
      $(row.node()).removeClass('dt-hasChild');
    } else {
      $("#items_hierarchy_wrapper").parent().css("display", "none");
    }
​
    return json.data;
  },
},
  serverSide: true,
    table: "#items_hierarchy",
      columnDefs: [{
        targets: "_all",
        defaultContent: "",
      }, ],
        columns: [{
          className: 'dt-control',
          orderable: false,
          searchable: false,
          data: null,
          width: '3%',
        },
                  {
                    title: 'Name',
                    data: 'name',
                    render(data, type, row, meta) {
                      switch (type) {
                        case 'display':
                          return row.items.item + (row.items.prefix == null ? '' : ', ' + row.items.prefix) + (row.items.suffix == null ? '' : ', ' + row.items.suffix);
​
                          break;
​
                        case 'sort':
                        case 'type':
                          return data;
​
                          break;
​
                        default:
                          return data;
​
                          break;
                      }
                    },
                    width: "25%"
                  },
                 ],
                  select: {
                  style: 'os',
                  selector: 'td:not(:first-child)'
                  },
                  language: {
                  select: {
                  rows: "<br>%d rows selected"
                  }
                  },
                  buttons: [{
                  className: 'subitemsAddButton create',
                  editor: editor,
                  extend: 'create',
                  formTitle: "Add Item",
                  text: 'Add Item'
                  },
                  {
                  className: 'subitemsEditButton edit',
                  editor: editor,
                  extend: 'edit',
                  formTitle: "Edit Item",
                  text: 'Edit Item',
                  attr: {
                  'data-toggle': 'modal',
                  'data-target': '#staticBackdrop',
                  }
                  },
                  {
                  className: 'subitemsDeleteButton remove',
                  editor: editor,
                  extend: 'remove',
                  formTitle: "Delete Item",
                  text: 'Delete Item'
                  }
                 ],
          paging: true,
            scrollCollapse: false,
              scrollX: false,
                rowCallback: function(row, data, index) {
                  $("td:empty", row).slice(1, 3).css('background-color', '#FEFFAB')
                },
​
                    // Initialisation complete callback, when table has fully been initialised, data loaded and drawn.
                    initComplete: function(settings, json) {
                      var api = this.api();
                      var count = api.rows().count();
​
                      JsBarcode("#barcode").init();
​
                      $('#items_hierarchy tbody').on('click', 'td.btn-image', function(event) {
                        event.stopPropagation();
​
                        let row = $(this).closest("tr");
                        let barCode = row.find(".upc").text();
​
                        let format;
​
                        switch (barCode.length) {
                          case 8:
                            document.querySelector('.modal-title').innerHTML = "EAN-8";
                            format = "ean8";
                            break;
                          case 12:
                            document.querySelector('.modal-title').innerHTML = "UPC";
                            format = "upc";
                            break;
                          case 13:
                            document.querySelector('.modal-title').innerHTML = "EAN-13 (GTIN-13)";
                            format = "ean13";
                            break;
                        }
​
                        JsBarcode("#barcode", barCode, {
                          font: "bold",
                          format: format,
                          margin: 0,
                        });
                      });
                    },
}) // subItemsTable
​
// Open and close item row detail information
$('#items_hierarchy tbody').on('click', 'td.dt-control', function(event) {
  event.stopPropagation();
​
  let tr = $(this).closest('tr');
  let tableRow = subItemsTable.row(tr);
​
  if (tableRow.child.isShown()) {
    tr.removeClass('shown');
​
    // This row is already open; close it
    destroyChild(tableRow);
  } else {
    // Enumerate all rows
    subItemsTable.rows().every(function() {
      // If row has details expanded
      if (this.child.isShown()) {
        $(this.node()).removeClass('shown');
​
        // Collapse row details
        this.child.hide();
      }
    });
​
    tr.addClass('shown');
​
    // Open this row
    createPackagingTableChildRow(tableRow);
​
    var index = tableRow.index();
​
    // var tableRect = document.querySelector('#items').getBoundingClientRect(),
    //     packagingRect = document.querySelector('#packaging').getBoundingClientRect(),
    //     offset = packagingRect.bottom + packagingRect.height;
​
    var indexRow = $(subItemsTable.row(index).node());
    $('html body').animate({
      scrollTop: indexRow.offset().top
    });
​
    indexRow.addClass('selected');
    setTimeout(function() {
      indexRow.removeClass('selected');
    });
​
    // if (offset >= tableRect.bottom) {
    //     itemsTable.row(index - 5).scrollTo();
    // }
  }
});
​
// Adjust text on buttons depending on number of DataTable rows selected
subItemsTable.on('select.dt', function(e, dt, type, indexes) {
  e.stopPropagation();
​
  let table = $('#items_hierarchy').DataTable();
​
  // if (table.rows({
  //         selected: true
  //     }).count() > 1) {
  //     $(".itemsEditButton").text('Edit Items')
  //     $(".itemsDeleteButton").text('Delete Items')
  // } else {
  //     $(".itemsEditButton").text('Edit Item')
  //     $(".itemsDeleteButton").text('Delete Item')
  // }
})
​
// Adjust text on buttons depending on number of DataTable rows remaining selected after deselection
subItemsTable.on('deselect.dt', function(e, dt, type, indexes) {
  e.stopPropagation();
​
  let table = $('#items_hierarchy').DataTable();
​
  // if (table.rows({
  //         selected: true
  //     }).count() > 1) {
  //     $(".itemsEditButton").text('Edit Items')
  //     $(".itemsDeleteButton").text('Delete Items')
  // } else {
  //     $(".itemsEditButton").text('Edit Item')
  //     $(".itemsDeleteButton").text('Delete Item')
  // }
})
​
} // createsubItemsTableChildRow
​
4 errors 14 warnings
Line 64: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 75: '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 154: 'concise methods' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 159: Unreachable 'break' after 'return'.
Line 165: Unreachable 'break' after 'return'.
Line 170: Unreachable 'break' after 'return'.
Line 215: Missing semicolon.
Line 228: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 229: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 231: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 255: Missing semicolon.
Line 261: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 262: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 312: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 323: Missing semicolon.
Line 329: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 340: Missing semicolon.
Output

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers