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>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="GA" class="display cell-border" style="table-layout:fixed;WIDTH:100%;display:table;">
        <thead>
          <tr>
                        <th style="text-align:center;width:10%;">Name</th>
                        <th style="text-align:center;">Roof</th>
                        <th style="text-align:center;">Door</th>
                        <th style="text-align:center;">Wall</th>
                        <th style="text-align:center;">Plenum</th>
                        <th style="text-align:center;">Tank/Base</th>
                        <th style="text-align:center;">Final Enclosure</th>
                        <th style="text-align:center;">Enclosure Electrical</th>
                        <th style="text-align:center;">Sub-Panel Assy / Wiring Electrical</th>
                        <th style="text-align:center;">Prep</th>
                        <th style="text-align:center;">Tank/Base</th>
                        <th style="text-align:center;">Final Assembly </th>
                        <th style="text-align:center;">Crane Operation Safety</th>
                        <th style="text-align:center;">Respiratory Protection</th>
                        <th style="text-align:center;">Heavy Lifting</th>
                        <th style="text-align:center;">Forklift Certified</th>
                        <th style="text-align:center;">Lock-out Tag-out Certified</th>
                        <th style="text-align:center;">5S Training</th>
                        <th style="text-align:center;">Crane Sling Training</th>
                    </tr>
                </thead>
            </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
 
var dataSet = [
    {
        "NAME": "ALDO RAMIREZ                  ",
        "ROOF_ASSEMBLY": "2",
        "DOOR_ASSEMBLY": "0",
        "WALL_ASSEMBLY": "0",
        "PLENUM_ASSEMBLY": "0",
        "TANK_BASE_ASSEMBLY": "0",
        "FINAL_ENCLOSURE_ASSEMBLY": "1",
        "ENCLOSURE_ELECTRICAL": "0",
        "SUBPANEL_ASSY_WIRING_ELECTRICAL": "0",
        "PREP_ELECTRICAL": "0",
        "TANK_BASE_ELECTRICAL": "0",
        "FINAL_ASSEMBLY_ELECTRICAL": "0",
        "CRANE_OPERATION_SAFETY": "0",
        "RESPIRATORY_PROTECTION": "0",
        "HEAVY_LIFTING": "0",
        "FORKLIFT_CERTIFIED": "0",
        "LOCKOUT_TAGOUT_CERTIFIED": "0",
        "5S_TRAINING": "0",
        "CRANE_SLING_TRAINING": "0"
    },
    {
        "NAME": "ANA TRENHOLM                  ",
        "ROOF_ASSEMBLY": "0",
        "DOOR_ASSEMBLY": "0",
        "WALL_ASSEMBLY": "2",
        "PLENUM_ASSEMBLY": "1",
        "TANK_BASE_ASSEMBLY": "0",
        "FINAL_ENCLOSURE_ASSEMBLY": "0",
        "ENCLOSURE_ELECTRICAL": "0",
        "SUBPANEL_ASSY_WIRING_ELECTRICAL": "0",
        "PREP_ELECTRICAL": "0",
        "TANK_BASE_ELECTRICAL": "0",
        "FINAL_ASSEMBLY_ELECTRICAL": "0",
        "CRANE_OPERATION_SAFETY": "0",
        "RESPIRATORY_PROTECTION": "0",
        "HEAVY_LIFTING": "0",
        "FORKLIFT_CERTIFIED": "0",
        "LOCKOUT_TAGOUT_CERTIFIED": "0",
        "5S_TRAINING": "0",
        "CRANE_SLING_TRAINING": "0"
    },
    {
        "NAME": "ANDREW ARNOLD                 ",
        "ROOF_ASSEMBLY": "0",
        "DOOR_ASSEMBLY": "0",
        "WALL_ASSEMBLY": "0",
        "PLENUM_ASSEMBLY": "0",
        "TANK_BASE_ASSEMBLY": "0",
        "FINAL_ENCLOSURE_ASSEMBLY": "1",
        "ENCLOSURE_ELECTRICAL": "0",
        "SUBPANEL_ASSY_WIRING_ELECTRICAL": "0",
        "PREP_ELECTRICAL": "0",
        "TANK_BASE_ELECTRICAL": "0",
        "FINAL_ASSEMBLY_ELECTRICAL": "0",
        "CRANE_OPERATION_SAFETY": "0",
        "RESPIRATORY_PROTECTION": "0",
        "HEAVY_LIFTING": "0",
        "FORKLIFT_CERTIFIED": "0",
        "LOCKOUT_TAGOUT_CERTIFIED": "0",
        "5S_TRAINING": "0",
        "CRANE_SLING_TRAINING": "0"
    },
    {
        "NAME": "ANN BURTON                    ",
        "ROOF_ASSEMBLY": "0",
        "DOOR_ASSEMBLY": "0",
        "WALL_ASSEMBLY": "0",
        "PLENUM_ASSEMBLY": "1",
        "TANK_BASE_ASSEMBLY": "0",
        "FINAL_ENCLOSURE_ASSEMBLY": "0",
        "ENCLOSURE_ELECTRICAL": "0",
        "SUBPANEL_ASSY_WIRING_ELECTRICAL": "0",
        "PREP_ELECTRICAL": "0",
        "TANK_BASE_ELECTRICAL": "0",
        "FINAL_ASSEMBLY_ELECTRICAL": "0",
        "CRANE_OPERATION_SAFETY": "0",
        "RESPIRATORY_PROTECTION": "0",
        "HEAVY_LIFTING": "0",
        "FORKLIFT_CERTIFIED": "0",
        "LOCKOUT_TAGOUT_CERTIFIED": "0",
        "5S_TRAINING": "0",
        "CRANE_SLING_TRAINING": "0"
    },
    {
        "NAME": "AUSTIN FLOREA                 ",
        "ROOF_ASSEMBLY": "0",
        "DOOR_ASSEMBLY": "0",
        "WALL_ASSEMBLY": "0",
        "PLENUM_ASSEMBLY": "0",
        "TANK_BASE_ASSEMBLY": "0",
        "FINAL_ENCLOSURE_ASSEMBLY": "0",
        "ENCLOSURE_ELECTRICAL": "1",
        "SUBPANEL_ASSY_WIRING_ELECTRICAL": "1",
        "PREP_ELECTRICAL": "1",
        "TANK_BASE_ELECTRICAL": "1",
        "FINAL_ASSEMBLY_ELECTRICAL": "1",
        "CRANE_OPERATION_SAFETY": "0",
        "RESPIRATORY_PROTECTION": "0",
        "HEAVY_LIFTING": "0",
        "FORKLIFT_CERTIFIED": "0",
        "LOCKOUT_TAGOUT_CERTIFIED": "0",
        "5S_TRAINING": "0",
        "CRANE_SLING_TRAINING": "0"
    },
    {
        "NAME": "AUSTIN ROEDER                 ",
        "ROOF_ASSEMBLY": "0",
        "DOOR_ASSEMBLY": "2",
        "WALL_ASSEMBLY": "1",
        "PLENUM_ASSEMBLY": "0",
        "TANK_BASE_ASSEMBLY": "0",
        "FINAL_ENCLOSURE_ASSEMBLY": "0",
        "ENCLOSURE_ELECTRICAL": "0",
        "SUBPANEL_ASSY_WIRING_ELECTRICAL": "0",
        "PREP_ELECTRICAL": "0",
        "TANK_BASE_ELECTRICAL": "0",
        "FINAL_ASSEMBLY_ELECTRICAL": "0",
        "CRANE_OPERATION_SAFETY": "0",
        "RESPIRATORY_PROTECTION": "0",
        "HEAVY_LIFTING": "0",
        "FORKLIFT_CERTIFIED": "0",
        "LOCKOUT_TAGOUT_CERTIFIED": "0",
        "5S_TRAINING": "0",
        "CRANE_SLING_TRAINING": "0"
    },
    {
        "NAME": "BENJAMIN SLOMIAN              ",
        "ROOF_ASSEMBLY": "0",
        "DOOR_ASSEMBLY": "0",
        "WALL_ASSEMBLY": "1",
        "PLENUM_ASSEMBLY": "0",
        "TANK_BASE_ASSEMBLY": "0",
        "FINAL_ENCLOSURE_ASSEMBLY": "0",
        "ENCLOSURE_ELECTRICAL": "1",
        "SUBPANEL_ASSY_WIRING_ELECTRICAL": "1",
        "PREP_ELECTRICAL": "1",
        "TANK_BASE_ELECTRICAL": "1",
        "FINAL_ASSEMBLY_ELECTRICAL": "1",
        "CRANE_OPERATION_SAFETY": "0",
        "RESPIRATORY_PROTECTION": "0",
        "HEAVY_LIFTING": "0",
        "FORKLIFT_CERTIFIED": "0",
        "LOCKOUT_TAGOUT_CERTIFIED": "0",
        "5S_TRAINING": "0",
        "CRANE_SLING_TRAINING": "0"
    }
];
​
$(document).ready( function () {
  train = $('#GA').DataTable({
    data: dataSet,
            dom: 't',
            createdRow: (tr, _,rowIndex) => $(tr).attr('rowIndex',rowIndex),
            columns:[
                {data: 'NAME', title: 'Name',width:'8%'},
                {data: 'ROOF_ASSEMBLY', title: 'Roof Assembly'},
                {data: 'DOOR_ASSEMBLY', title: 'Door Assembly'},
                {data: 'WALL_ASSEMBLY', title: 'Wall Assembly'},
                {data: 'PLENUM_ASSEMBLY', title: 'Plenum Assembly'},
                {data: 'TANK_BASE_ASSEMBLY', title: 'Tank/Base Assembly'},
                {data: 'FINAL_ENCLOSURE_ASSEMBLY', title: 'Final Enclosure Assembly'},
                {data: 'ENCLOSURE_ELECTRICAL', title: 'Enclosure Electrical'},
                {data: 'SUBPANEL_ASSY_WIRING_ELECTRICAL', title: 'Sub-Panel Assy Wiring'},
                {data: 'PREP_ELECTRICAL', title: 'Prep Electrical'},
                {data: 'TANK_BASE_ELECTRICAL', title: 'Tank/Base Electrical'},
                {data: 'FINAL_ASSEMBLY_ELECTRICAL', title: 'Final Assembly Electrical'},
                {data: 'CRANE_OPERATION_SAFETY', title: 'Crane Operation & Safety'},
                {data: 'RESPIRATORY_PROTECTION', title: 'Respiratory Protection'},
                {data: 'HEAVY_LIFTING', title: 'Heavy Lifting'},
                {data: 'FORKLIFT_CERTIFIED', title: 'Forklift Certified'},
                {data: 'LOCKOUT_TAGOUT_CERTIFIED', title: 'Lockout Tag-out Certified'},
                {data: '5S_TRAINING', title: '5S Training'},
                {data: 'CRANE_SLING_TRAINING', title: 'Crane & Sling Training', render: function (data,type,row,meta) {return data+'   <i class="edit fa fa-pencil"></i>';}}
            ],
            pageLength: 50,
            columnDefs: [
                {className: 'dt-head-center', targets: [0]}
            ],
            searching: true
        });
});
​
​
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