File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="\main.css">
    <title>Document</title>
    <link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"  rel="stylesheet" type="text/css"/>
​
    <script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js" type="text/javascript"></script>
    
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js" type="text/javascript"></script>
​
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/rg-1.1.4/datatables.min.css"/>
    
    
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/rg-1.1.4/datatables.min.js"></script>
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"  rel="stylesheet" type="text/css"/>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js" type="text/javascript"></script>
    <script type="text/javascript"  src="\main.js"></script>
    
    
</head>
<body>
    <table id="hserack_items" class = "table-responsive">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
    </table>
</body>
</html>
CSSSaved
 
​
.cell { 
​
    padding: 0px;
    display: flex;
    justify-content: center;
}
​
​
td {
    border: 1px solid #000;
}
​
tr td:last-child {
    width: 1%;
    white-space: nowrap;
}
​
​
​
JavaScriptSaved
 
​
$(document).ready(function() {
var collapsedGroups = {};
var top = '';
var table = $('#hserack_items').DataTable({
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.childRowImmediate,
            type: 'none',
            target: ''
        }
    },
    data: [
   {
      "HSESHELF":"Shelf: 1",
      "HOUSECTION":"S 7",
      "CODE":"ABCD",
      "LABLDATE":"11-29",
      "NAME":"Christmas Bells",
      "QTY":4,
      "SCANNED":[
         "12",
         "12",
         "12",
         "12"
      ]
   },
   {
      "HSESHELF":"Shelf: 2",
      "HOUSECTION":"S10",
      "CODE":"DEFG",
      "LABLDATE":"11-29",
      "NAME":"Christmas Bells",
      "QTY":4,
      "SCANNED":[
         "12",
         "12",
         "12",
      ]
   },
],
    columns: [
        { data: "HSESHELF" },
        { data: "HOUSECTION" },
        {
            data: null,
            
            render: function ( data, type, row, meta) {
                let scanned_qty = row["SCANNED"].length;
                let rendered_data = `${scanned_qty}/${row["QTY"]}`;
                return rendered_data
            },
​
        },
        { data: "CODE",},
        { data: "LABLDATE" },
        { data: "NAME" },
        { data: "SCANNED" },
        { data: "QTY",
    },
    ],
    rowGroup: {
        dataSrc: [ "HSESHELF", "HOUSECTION"],
        startRender: function(rows, group,level) {
            var all;
​
            if (level === 0) {
                top = group;
                all = group;
            } else {
                // if parent collapsed, nothing to do
                if (!!collapsedGroups[top]) {
                    return;
                }
                all = top + group;
            }
            // console.log(group,level,collapsedGroups);
            var collapsed = !!collapsedGroups[all];
            let count = 0;
            rows.nodes().each(function(r) {
                let elements = r.children[0].textContent.split("/");
                if (elements[0]== elements[1]) {
                    count+= 1;
                }
            });
      
            if (count ==  rows[0].length) {
                collapsed = !collapsed;
            }
            rows.nodes().each(function(r) {
                r.style.display = collapsed ? 'none' : '';
            });
            // Add category name to the <tr>. NOTE: Hardcoded colspan
            
            return $('<tr/>')
                .append('<td colspan="8">' + group + '</td>')
                .attr('data-name', all)
                .toggleClass('collapsed', collapsed);
        },
    },
    "columnDefs": [
        { "width": "10%", "targets": 2 },
        {
            "targets": [0,1,6,7],
            "visible": false,
        }
    ],
    paging: false,
    // select: true,
    "ordering": false,  
});
  
table.on('draw', function () {
    table.rows({page: 'current'}).every( function ( rowIdx, tableLoop, rowLoop ) {
        var data = this.data();
        
        // Check to see if any of the rowGroup.dataSrc collapsable rows are collapsed
        if (collapsedGroups[data.HSESHELF]) {
        this.child.hide();
        } else {
        this.child.show();
        }
    } );
    })
​
$('#hserack_items tbody').on('click', 'tr.dtrg-level-0', function () {
    var name = $(this).data('name');
    collapsedGroups[name] = !collapsedGroups[name];
    table.draw(false);
}); })
6 errors 6 warnings
Line 49: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 49: ['SCANNED'] is better written in dot notation.
Line 50: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 50: Unexpected '`'.
Line 51: Expected an identifier and instead saw 'return'.
Line 51: Missing semicolon.
Line 51: Expected an assignment or function call and instead saw an expression.
Line 51: Missing semicolon.
Line 79: '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 124: Missing semicolon.
Line 130: Missing semicolon.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers