Datatable inline row editing

This example demonstrate cell editing, highlights the updated row, adds row immediately below to the selected row

by Mahavirsinh Padhiyar

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script src="http://jquery-datatables-editable.googlecode.com/svn/trunk/media/js/jquery.dataTables.editable.js"></script>
<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.js"></script>
Click on column header before clicking on Add new column button<br>
Click on any row before clicking on Add new column button<br>
<button type="button" id="btnAddRow">Add new row</button>
<button type="button" id="btnAddCol">Add new column</button>
<br>
<table class="dataTable" id="example">
</table>

JavaScript

var data_table, row_num, col_num, row_cell, col_cell, iter=0;
var cols = [
    { "mDataProp": "Field1"},
    { "mDataProp": "Field2" },
    { "mDataProp": "Field3" },
    { "mDataProp": "Field4" }
];

var colDef = [{aTargets: [0], sTitle: "Date"},
              {aTargets: [1], sTitle: "Number"},
              {aTargets: [2], sTitle: "FName"},
              {aTargets: [3], sTitle: "LName"},
             ];
 
//Get stored data from HTML table element
var results = [{
       Field1: "2011/04/23",
       Field2: 8,
       Field3: "Adam",
       Field4: "Den"},
      {
       Field1: "2011/03/25",
       Field2: 6,
       Field3: "Honey",
       Field4: "Singh"}
    ];
 
function initDT(){
    //Construct the measurement table
    data_table = $('#example').dataTable({
        "bJQueryUI": true,
        //"sPaginationType": "full_numbers",
        //"bProcessing": true,
        "bDeferRender": true,
        "bInfo" : false,
        "bSort" : false,
        "bDestroy" : true,
        "bFilter" : false,
        "bPagination" : false,
        "aaData": results,
        "aoColumns": cols,
        "aoColumnDefs": colDef
    });
    attachTableClickEventHandlers();
}

initDT();

function attachTableClickEventHandlers(){
  //row/column indexing is zero based
  $("#example thead tr th").click(function() {     
            col_num = parseInt( $(this).index() );
            console.log("column_num ="+ col_num );   
    });
    $("#example tbody tr td").click(function() {     
            col_cell = parseInt( $(this).index() );
            row_cell = parseInt( $(this).parent().index() );    
            console.log("Row_num =" + row_cell + "  ,  column_num ="+ col_cell );
    });  
};

$("#btnAddRow").click(function(){
    //adding/removing row from datatable datasource
    var record = {
       "Field1": "2011/04/23",
       "Field2": '8',
        "Field3": "tom",
        "Field4": "jerry"};
    //create test new record
    var aoCols = data_table.fnSettings().aoColumns;
   ...