File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
​
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
​
<!-- Latest compiled and minified JavaScript -->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        
    
    <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<link href="//cdn.datatables.net/tabletools/2.2.2/css/dataTables.tableTools.css" rel="stylesheet" type="text/css" />
<script src="//cdn.datatables.net/tabletools/2.2.2/js/dataTables.tableTools.js"></script>
​
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
​
    <title>DataTables - JS Bin</title>
  </head>
<body style="background-color: rgb(214, 232, 255)">
​
                            <form id="frmInstruction" name="frmInstruction" action="" method="get">
                            <div class="row">
                                <div class="form-group col-xs-6">
                                    <label>
                                        Instruction Details</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <div class="input-group">
                                        <input id="txtInstructionDetails" type="text" class="form-control" />
                                        <span class="input-group-btn">
                                            <button id="btnAddInstruction" class="btn btn-default" type="button">
                                                Add Instruction</button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="row">
                                <div class="form-group col-sm-12">
                                    <table id="tblInstructions" class="display table table-striped table-bordered" cellspacing="0"
                                        width="100%">
                                        <thead>
                                            <tr>
                                                <th style="width: 10%">
                                                    instructionID
                                                </th>
                                                <th style="width: 10%">
                                                </th>
                                                <th style="width: 70%">
                                                    Task Details
                                                </th>
                                                <th style="width: 10%">
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody class="instructions">
​
                                    </table>
                                </div>
                            </div>
                            </form>
         <br /><br />
                            <form id="frmSORInstall" name="frmSORInstall" action="" method="get">
                            <div id="sors">
                                <div class="row">
                                    <div class="form-group col-sm-12">
                                        <button id="btnLoadData" type="button" class="btn btn-default">
                                            Load copied data</button>
                                        <button id="btnReset" type="button" class="btn btn-default">
                                            Reset Table</button>
                                      <br /><p><p>
                                        <table id="tblSORSInstall" class="table table-striped table-bordered" cellspacing="0"
                                            width="100%">
                                            <thead>
                                                <tr>
                                                    <th style="width: 10%">
                                                        Code
                                                    </th>
                                                    <th style="width: 50%">
                                                        Description
                                                    </th>
                                                    <th style="width: 10%">
                                                        Quantity
                                                    </th>
                                                    <th style="width: 20%">
                                                        Instruction
                                                    </th>
                                                    <th style="width: 10%">
                                                    </th>
                                                  <th></th>
                                                </tr>
                                            </thead>
                                            <tbody class="sors">
                                            </tbody>
                                        </table>
                                        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h4 class="modal-title" id="editModalLabel">
                                                            Edit SOR:</h4>
                                                    </div>
                                                    <div class="modal-body">
​
                                                        <div class="form-group">
                                                            <input id="editSORIndex" type="text" class="form-control" disabled />
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="editSORCode" class="control-label">
                                                                Code:</label>
                                                            <input id="editSORCode" type="text" class="form-control" disabled />
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="editSORDescription" class="control-label">
                                                                Description:</label>
                                                            <input id="editSORDescription" type="text" class="form-control" />
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="editSORQuantity" class="control-label">
                                                                Quantity:</label>
                                                            <input id="editSORQuantity" type="text" class="form-control" />
                                                        </div>
​
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                                            Cancel</button>
                                                        <button id="btnSaveSOREdit" type="button" class="btn btn-primary">
                                                            Save</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                            </form>
  
  <button type="button" id="btnTest">Test</button>
​
            <!-- container div -->
</body>
</html>
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
​
div.container {
  min-width: 980px;
  margin: 0 auto;
}
​
.input-xs {
  height: 24px;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 2px;
  vertical-align: middle;
}
select.input-xs {
  height: 24px;
  line-height: 1.5;
}
​
JavaScript
 
// no protect
​
$(document).ready( function () {
  
​
var tInstructions = $('#tblInstructions').DataTable({
        "bFilter": false,
        "columnDefs": [{
            "searchable": false,
            "orderable": false,
            "targets": [0, 1, 2]
        }],
        "bLengthChange": false
    });
​
    tInstructions.column(0).visible(false);
​
    tInstructions.on('order.dt search.dt', function () {
        tInstructions.column(1, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
            cell.innerHTML = i + 1;
        });
    }).draw();
​
​
​
    var tSORS = $('#tblSORSInstall').DataTable({
​
        "columnDefs": [
                        {
                            "data": null,
                            "defaultContent": "<button class='btn btn-default .deleteRow'>Edit</button>",
                            "targets": 4
                        },
          {
            "data": null,
            "render": "New",
            "targets": 5
                        }
                      ]
​
    });
​
  $('#tblSORSInstall tbody').on('click', 'td', function (e) {
​
        
​
        var tableAPI = $('#tblSORSInstall').DataTable();
        var table = $('#tblSORSInstall').dataTable();
​
        var data = table.fnGetData($(this).closest('tr')[0]);
        var idx = table.fnGetPosition($(this).closest('tr')[0]);
​
        var row = $(this).parents("tr")[0];
​
        var id = table.fnGetData(row.cells[5]);
 
                
        alert(tableAPI.cell(idx, 5).data());
        table.fnUpdate("Delete", idx, 5, true);
        tableAPI.cell(idx, 5).data("Delete").draw();
    
    //tableAPI.draw();
​
    });
​
​
    $('#tblSORSInstall tbody').on('click', 'tr .editRow', function (e) {
​
        var t = $('#tblSORSInstall').dataTable();
        var a = t.fnGetData($(this).closest('tr')[0]);
        var indx = tSORS.row($(this).closest('tr')[0]).index();
​
        $('#editSORIndex').val(indx);
        $('#editSORCode').val(a[0]);
        $('#editSORDescription').val(a[1]);
        $('#editSORQuantity').val(a[2]);
​
        $("#editModal").modal('show');
​
    });
​
​
    $('#btnSaveSOREdit').on('click', function (e) {
​
        //check Quantity is a number first
​
        if (isNaN($('#editSORQuantity').val())) {
            alert('Invalid Quantity!');
            return;
        }
        //update the Description and quantity cell
​
        var idx = $('#editSORIndex').val();
​
​
        tSORS.cell(idx, 1).data($('#editSORDescription').val());
​
        tSORS.cell(idx, 2).data($('#editSORQuantity').val()).draw(false);
​
        $("#editModal").modal('hide');
    });
​
    $('#tblSORSInstall tbody').on('click', 'tr .deleteRow', function (e) {
​
        alert("edit row!");
​
    });
​
​
    $("#btnAddInstruction").click(function () {
​
        if ($("#txtInstructionDetails").val() == "" || $("#txtInstructionDetails").val() == null) {
            alert("You must enter the Instruction details!");
            return;
        }
​
        var insDetails = $("#txtInstructionDetails").val();
​
        tInstructions.row.add(["", "", insDetails, "<button class='btnDeleteInstruction'>X</button>"]).draw();
​
        $("#txtInstructionDetails").val('').focus();
​
    });
​
​
    $('#tblInstructions tbody').on('click', '.btnDeleteInstruction', function () {
        tInstructions
        .row($(this).parents('tr'))
        .remove()
        .draw();
    });
​
​
    $("#btnLoadData").click(function () {
​
​
        //        var clipText = $("#pastedData").val();
​
        //        // split into rows
​
        //        clipRows = clipText.split("\n");
​
        //        // split rows into columns
​
        //        for (i = 0; i < clipRows.length; i++) {
        //            clipRows[i] = clipRows[i].split("\t");
        //        }
​
​
        // get the clipboard text
​
        //var clipText = window.clipboardData.getData('Text');
​
        var clipText = "330001,DOOR:RENEW INTERNAL PLY FLUSH 4,1;" +
                       "330001,DOOR:RENEW INTERNAL PLY FLUSH 2,1;" +
                       "330001,DOOR:RENEW INTERNAL PLY FLUSH 3,1;" +
                       "330001,DOOR:RENEW INTERNAL PLY FLUSH 1,1;";
        
        if (clipText == "" || clipText == null) {
            alert("No data on the Clipboard!");
            return;
        }
​
        // split into rows
​
        clipRows = clipText.split(";");
​
        // split rows into columns
​
        for (i = 0; i < clipRows.length; i++) {
​
            clipRows[i] = clipRows[i].split(",");
        }
​
        // check that there are only 3 rows (validation for the sor code will come later)
​
        if (clipRows[0].length != 3) {
​
            alert("Invalid Data! Please check the copied data and try again");
            return;
        }
​
        // write out in a table
​
        for (i = 0; i < clipRows.length - 1; i++) {
​
            clipRows[i].push(getInstructions());
            tSORS.row.add(clipRows[i]).draw();
​
        }
​
    });
​
    $("#btnReset").click(function () {
​
        $('#tblSORSInstall').dataTable().fnClearTable();
        //$("#tblSORSInstall tbody > tr").remove();
​
    });
  
    
  $('#btnTest').on('click', function (e) {
​
    var tsor = $('#tblSORSInstall').dataTable();
    var ins = tsor.fnGetData();
    var a = tsor.fnGetNodes();
    
       
    //alert(ins);
    $.each(tsor.fnGetNodes(), function (index, value) {
          
      alert(index + " - " + value.cells[3].innerHTML);
        });
​
        
    });
​
​
});                   // end of document ready
​
​
    function getInstructions() {
​
        // loop through and get the instructions
​
        var tIns = $('#tblInstructions').dataTable();
        var ins = tIns.fnGetData();
​
        var instructions = "<div class='form-group'>" +
                            "<select class='form-control input-xs'>";
​
        $.each(tIns.fnGetNodes(), function (index, value) {
​
            instructions = instructions + "<option value='" + index + "'>" + value.cells[0].innerHTML + " - " + value.cells[1].innerHTML + "</option>";
        });
​
        instructions = instructions + "</select>" +
                                      "</div>";
​
        return instructions;
​
    }
2 warnings
Line 112: Use '===' to compare with ''.
Line 159: Use '===' to compare with ''.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers