CRUD Operations on Datatables.NET

by Hifni Nazeer

HTML

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='form-horizontal'>

</div>

<div class='form-inline'>
<div class="form-group">
  <label>Security ID:</label>
  <input type="text" id="SecurityID" />
</div>
<div class="form-group">
   <label>Quantity:</label>
  <input type="text" id="Quantity" />
</div>
<div class="form-group">
  <label>Comment:</label>
  <input type="text" id="DetailComment" />
</div>
<button class="btn-btn-default" id="btnAdd">Add</button>
</div>

<fieldset>
  <legend>Add Item</legend>
  
 
  

  

  <div id="divSecurityList">
    <table class="display nowrap" cellspacing="0" id="tableIntraAccountSecurityList">
      <thead>
        <tr>
          <th>Serial No</th>
          <th>Security</th>
          <th>Quantity</th>
          <th>Comment</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>JKH.N0000</td>
          <td>1000</td>
          <td></td>
        </tr>
        <tr>
          <td>1</td>
          <td>KAPI.N0000</td>
          <td>1000</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</fieldset>
<fieldset>
  <legend>Operation on Selected Row</legend>
  <input type="button" value="Remove" id="btnRemoveRow" />
  <input type="button" value="Amend" id="btnAmendRow" />
</fieldset>

JavaScript

var table;
var existing_table;

$(document).ready(function() {
	alert('Loaded');

  table = $('#tableIntraAccountSecurityList').DataTable({
    paging: false
  });

  $('#btnAdd').click(function(e) {
    if (table != undefined) {
      table.row.add([
        "0",
        $('#SecurityID').val(),
        $('#Quantity').val(),
        $('#DetailComment').val()
      ]).draw(false);
      
      $(this).val('Add');
    }
  });

  $('#btnRemoveRow').click(function() {
    table.row('.selected').remove().draw(false);
  });
  
  $('#btnAmendRow').click(function() {
    var d = table.row('.selected').data();
    alert(d.length);
    $('#SecurityID').val(d[1]);
    $('#Quantity').val(d[2]);
    $('#DetailComment').val(d[3]);
    
    $('#btnAdd').val('Save');
  });

  $('#tableIntraAccountSecurityList tbody').on('click', 'tr', function() {        
    if ($(this).hasClass('selected')) {            
      $(this).removeClass('selected');        
    }        
    else {            
      table.$('tr.selected').removeClass('selected');            
      $(this).addClass('selected');        
    }    
  });
});


function IntraTransferUpdate() {
  var intraAccount = {
    "IntraSerialNo": "",
    "XsactDate": "",
    "InAccountID": "",
    "OutAccountID": "",
    "SalesCode": "",
    "HeaderComment": "",
    "SecurityList": []
  };

  var intraAccountSecurityList = {
    "IntraSerialNo": "",
    "SecurityID": "",
    "Quantity": "",
    "DetailComment": ""
  };

  with(intraAccount) {
    IntraSerialNo = $("#IntraSerialNo").val();
    XsactDate = $("#XsactDate").val();
    InAccountID = $("#InAccountID").val();
    OutAccountID = $("#OutAccountID").val();
    SalesCode = $("#SalesCode").val();
    DetailComment = $("#DetailComment").val();
  }

  var data = $('#tableIntraAccountSecurityList').dataTable().fnGetData();

  for (var i = 0; i < data.length; i++) {

    // Initialize the Detail
    intraAccountSecurityList.IntraSerialNo = data[i][0];
   ...