Save values of inputs in child rows - DataTables

Question

I have responsive DataTable in Form. DataTables generate child rows on small devices. In this rows I have some Input controls. And that causes two problems.

First problem:** Values from hidden child rows does not get into Form data.**

Second problem:** Values disappear after editing this inputs and hide row.**

Can someone please help me out?

Thanks

Update

Simplified tbody before .DataTable()

<tbody>
    <tr>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>
            <input name="1" type="text"/>
        </td>
        <td>
            <input name="2" type="text"/>
        </td>
        <td>
            <input name="3" type="text" value="example"/>
        </td>
    </tr>               
</tbody>

After .DataTable()

<tbody>    
    <tr role="row" class="odd">
        <td class="sorting_1">System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
    </tr>
</tbody>

And expanded

<tbody>  
  <tr role="row" class="odd parent">
    <td class="sorting_1">System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>              
  </tr>
  <tr class="child">
    <td class="child" colspan="3">
      <ul data-dtr-index="0">
        <li data-dtr-index="3">
          <span class="dtr-title">Age:</span>
          <span class="dtr-data">
            <input name="1" type="text" style="background-image: ; background-       attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
          </span>
         </li>
         <li data-dtr-index="4">
           <span class="dtr-title">Start date:</span>
           <span class="dtr-data">
             <input name="2" type="text"></span>
         </li>
         <li data-dtr-index="5">
           <span class="dtr-title">Salary:</span>
           <span class="dtr-data">
             <input name="3" type="text" value="example">
           </span>
         </li>
       </ul>
     </td>
  </tr>
</tbody>

All simplified code looks like this fiddle.

Annotation

For some our internal problems I cannot use DataTables Ajax method - it would be very slow and against application logic. Thats why I am trying pass data from DataTable by classic Form.

Answer 1

SOLUTION

Below is not an ideal solution but at least it works. I haven't tested hidden form elements and also this solution will not work with multiple form elements in the same cell.

You need to use columnDefs to target all columns containing form element and using render option define a function that will return HTML containing current form field value. This is necessary to render correct form field in child row.

In addition, parent form field needs to be updated when user changes value of the form field in child row.

$(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); }
   });
});

DEMO

See this jsFiddle for code and demonstration.

LINKS

• jQuery DataTables – Form inputs with Responsive extension.
• Discussion on DataTables.net forum