DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css">
<table id="example" class="display" cellspacing="0" width="100%">
     <thead>
         <tr>
             <th>ID</th>
             <th>Name</th>
             <th>Lattitude</th>
             <th>Longitude</th>
         </tr>
        </thead>
 </table>

JavaScript

$(document).ready(function() {
    var table = 
    $('#example').DataTable({
        "retrieve": true, 
        "processing" : true,
        "ajax" : {
            "url" : "https://api.myjson.com/bins/14t4g",
            dataSrc : ''
        },
        "columns" : [ {
            "data" : "id"
        }, {
            "data" : "name", 
            "render": function (data, type, row) {
            	if (type === "display") 
            	{
            		alert("display");
            		return BuildDropdown(data); 
              }
              else
              {
                 alert("not display");
                 return data;
              }
            }
        }, {
            "data" : "lat"
        }, {
            "data" : "lon"
        }]
    });
    
    SetEvents();
});

function BuildDropdown(data)
{
   var airports = ["London Heathrow", "London Gatwick", "Brussels Airport", "Moscow Vnukovo", "JFK"]
   var $select = $("<select></select>", {
     								"value": data
   							 });
   $.each(airports, function(index, value) {
      var $option = $("<option></option>", {
        "text": value,
        "value": value
      });
      if (data === value) {
        $option.attr("selected", "selected")
      }
      $select.append($option);
    });
    return $select.prop("outerHTML");
}


function SetEvents()
{
  table = $('#example');
  table.on('change', 'td', function (event) { UpdateCellValue(this) });
}

function UpdateCellValue(cellChanged)
{
  theGrid = $('#example').DataTable();
  
  // Works, but not what I want since it calls "render" function:
  theGrid.cell($(cellChanged)).data(cellChanged.children[0].value);
  
  // What I'd like to work:
  // var currentRowData = theGrid.row($(cellChanged).closest('tr')).data();
  // var columnIndexChanged = $(cellChanged).index();
  // currentRowData[columnIndexChanged] = cellChanged.children[0].value;
}