jQuery DataTables – Form inputs with Responsive extension

Example for article at http://www.gyrocode.com/articles/jquery-datatables-form-inputs-with-responsive-extension/

by gyrocode

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9,r-1.0.7/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9,r-1.0.7/datatables.min.js"></script>
<h3><a href="http://www.gyrocode.com/articles/jquery-datatables-form-inputs-with-responsive-extension/">jQuery DataTables -  Form inputs with Responsive extension</a></h3>
<a href="http://www.gyrocode.com/articles/jquery-datatables-form-inputs-with-responsive-extension/">See full article on Gyrocode.com</a>
<hr><br>

<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Age</th>
         <th>Position</th>
         <th>Office</th>
         <th>Selected</th>
         <th>Comments</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Age</th>
         <th>Position</th>
         <th>Office</th>
         <th>Selected</th>
         <th>Comments</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Tiger Nixon</td>
         <td><input type="text" name="row-1-age" value="61"></td>
         <td><input type="text" name="row-1-position" value="System Architect"></td>
         <td><select size="1" name="row-1-office">
            <option value="Edinburgh" selected="selected">Edinburgh</option>
            <option value="London">London</option>
            <option value="New York">New York</option>
            <option value="San Francisco">San Francisco</option>
            <option value="Tokyo">Tokyo</option>
         </select></td>
         <td><input type="checkbox" name="row-1-selected" value="1"></td>
         <td><textarea name="row-1-comments" rows="3" cols="20"></textarea></td>
      </tr>
      <tr>
         <td>Garrett Winters</td>
         <td><input type="text" name="row-2-age" value="63"></td>
         <td><input type="text" name="row-2-position" value="Accountant"></td>
         <td><select size="1" name="row-2-office">
            <option...

JavaScript

$(document).ready(function (){
   var table = $('#example').DataTable({
      'columnDefs': [
         {
            'targets': [1, 2, 3, 4, 5],
            'render': function(data, type, row, meta){
               if(type === 'display'){
                  var api = new $.fn.dataTable.Api(meta.settings);

                  var $el = $('input, select, textarea', api.cell({ row: meta.row, column: meta.col }).node());

                  var $html = $(data).wrap('<div/>').parent();

                  if($el.prop('tagName') === 'INPUT'){
                     $('input', $html).attr('value', $el.val());
                     if($el.prop('checked')){
                        $('input', $html).attr('checked', 'checked');
                     }
                  } else if ($el.prop('tagName') === 'TEXTAREA'){
                     $('textarea', $html).html($el.val());

                  } else if ($el.prop('tagName') === 'SELECT'){
                     $('option:selected', $html).removeAttr('selected');
                     $('option', $html).filter(function(){
                        return ($(this).attr('value') === $el.val());
                     }).attr('selected', 'selected');
                  }

                  data = $html.html();
               }

               return data;
            }
         }
      ],

      'responsive': true
   });

   // Update original input/select on change in child row
   $('#example tbody').on('keyup change', '.child input, .child select, .child textarea', function(e){
       var $el = $(this);
       var rowIdx = $el.closest('ul').data('dtr-index');
       var colIdx = $el.closest('li').data('dtr-index');
       var cell = table.cell({ row: rowIdx, column: colIdx }).node();
       $('input, select, textarea', cell).val($el.val());
       if($el.is(':checked')){ 
          $('input', cell).prop('checked', true);
       } else {
          $('input', cell).removeProp('checked');
       }
   });
});