jQuery DataTables: Responsive extension and form inputs

October 31, 2015May 10, 2018 Michael Ryvkin

jQuery DataTables plug-in can be used for tables containing form elements as shown in this example. However when combined with Responsive extension form elements loose their value when page width changes.

Problem

Table below demonstrates the problem with table containing form elements and Responsive extension.

To replicate the problem, perform the following steps:

Select a different office from the drop-down in the last column of the first row, for example Edinburgh.
Reduce window size so that Office column becomes hidden.
Click on green (+) icon to show additional details and original value Tokyo will be shown instead of the new one Edinburgh.

The same problem occurs with input and textearea elements.

Name	Age	Position	Office	Selected	Comments
Name	Age	Position	Office	Selected	Comments
Tiger Nixon
Garrett Winters
Ashton Cox
Cedric Kelly
Airi Satou
Brielle Williamson
Herrod Chandler
Rhona Davidson
Colleen Hurst
Sonya Frost
Jena Gaines
Quinn Flynn

Solution

Name	Age	Position	Office	Selected	Comments
Name	Age	Position	Office	Selected	Comments
Tiger Nixon
Garrett Winters
Ashton Cox
Cedric Kelly
Airi Satou
Brielle Williamson
Herrod Chandler
Rhona Davidson
Colleen Hurst
Sonya Frost
Jena Gaines
Quinn Flynn

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

In addition to the above code, the following Javascript library files are loaded for use in this example:

//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
https://cdn.datatables.net/r/dt/dt-1.10.9,r-1.0.7/datatables.min.js

The following CSS library files are loaded for use in this example to provide the styling of the table:

https://cdn.datatables.net/r/dt/dt-1.10.9,r-1.0.7/datatables.min.css

Edit on jsFiddle

Other examples

Responsive extension, form inputs and custom controls (Select2)

Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.

Comments

Ndole says:

April 3, 2016 at 4:24 am

Is there a way to replace the default select with the Select2 plugin inside the DataTables?

Reply
1. Michael Ryvkin says:
  
  April 3, 2016 at 11:52 am
  
  That is a good question! You need to combine solutions from the article above and Responsive extension and custom controls article in order to make it work. It would have been much simpler without Responsive extension but nowadays Responsive extension is a must.
  
  See this jsFiddle for an example of using custom control (such as Select2) and Responsive extension.
  
  Reply
  1. Boris says:
    
    May 24, 2016 at 4:38 am
    
    Hi Michael,
    
    I noticed that for devices with smaller screens, when you click on the green icon to open the row and change any of the child inputs and then close the row,the value is reset to its default value ,any fix for this?
    
    Reply
    1. Michael Ryvkin says:
      
      May 24, 2016 at 12:09 pm
      
      That is exactly the problem my code solves. I just checked the table in SOLUTION section and it works as expected, all the values are retained. Make sure you’re using the table in the SOLUTION section and not in the PROBLEM section where it doesn’t work and is there to demonstrate the problem.
      
      Reply

Wow! This is exactly what I was looking for. Worked like a charm.

I noticed that the form elements that are collapsed in the responsive tables post a null value which cannot be inserted into a database upon submission of the form, is there a workaround for this?

Thanks for getting back to me.

Michael Ryvkin says:

April 3, 2016 at 1:26 pm

Let me think and I will get back to you.

Reply
1. Ndole says:
  
  April 3, 2016 at 1:40 pm
  
  Thank you.
  
  Reply

Use the code below to submit the form via Ajax. There might be a way to submit the form directly, but the code would be more complex.

$('#frm-example').on('submit', function(e){
   var $form = $('<form></form>');
   
   table.cells().every( function () {
      $('input, select, textarea', $(this.node())).each(function(){
         $form.append($(this).clone());
      });
   });
   
   // Submit data via Ajax
   $.ajax({
      url: '/path/to/your/script',
      data: $form.serialize()
   });      
    
   // Prevent actual form submission
   e.preventDefault();
});

Thank you so much for your time.
I really don’t know much about ajax but I’ll google and see how i can integrate your helpful script with my php script,oh and will i need any other third party plugin for posting data via ajax?

It still doesn’t submit the hidden rows and columns after submitting the form via Ajax. Here’s my code.

$('#form').submit(function(event) {
   var $form = $('<form><.form>');

   table.cells().every(function() {
      $('input, select, textarea', $(this.node())).each(function() {
         $form.append($(this).clone());
      });
   });

   var formData = $("form").serialize();

   // process the form
   $.ajax({
      type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
      url: baseurl + 'admin/bulk', // the url where we want to POST
      data: formData, // our data object
      dataType: 'json', // what type of data do we expect back from the server
      encode: true
   })

   // using the done promise callback
   .done(function(data) {
     // log data to the console so we can see
     console.log(data);
   })

   // using the fail promise callback
   .fail(function(data) {
      // show any errors
      // best to remove for production
      console.log(data);
   });

   // stop the form from submitting the normal way and refreshing the page
   event.preventDefault();
});

Michael Ryvkin says:

April 4, 2016 at 9:25 am

There is error in your code. Replace $("form").serialize(); with $form.serialize().

Reply
1. Ndole says:
  
  April 7, 2016 at 12:38 pm
  
  Hi,
  
  Sorry for this late reply but i would like to thank you for your help, the code now works perfectly,
  Have a good day
  
  Reply

Pedro Skakum says:

July 19, 2016 at 7:50 am

If my hidden input for type hidden? Can someone help me? thank you very much, it is very important to me and I am unable to do.

Reply
1. Michael Ryvkin says:
  
  July 19, 2016 at 7:59 am
  
  I believe the code in the article should work for hidden inputs as well.
  
  Reply
Salim says:

September 19, 2016 at 4:53 am
Hi Michael,
How would i implement this with bootstrap datetimepicker? I tried initializing the datetimepicker like this but it doesn’t work.
```
 function initDataTableCtrl(container) {
    $('table select', container).select2();
    $('.datepicker',container).datetimepicker({
       format:'YYYY-MM-DD'
    });
}
```
Is there any workaround to this?
Thanks.
Reply
1. Michael Ryvkin says:
  
  September 19, 2016 at 9:23 am
  You need to call initDataTableCtrl() inside callback defined by drawCallback option, see solution to similar problem.
```
$('#example').dataTable({
   "drawCallback": function(settings){
      var api = new $.fn.dataTable.Api( settings );
      initDataTableCtrl(api.table().container());
   }
});
```
  Reply
  1. Salim says:
    
    September 20, 2016 at 2:13 am
    
    I did exactly that but for smaller screens, datatable will empty the datetimepicker values on submit
    
    Reply
parth says:

April 18, 2017 at 6:34 am

not working with checkbox

in full width if checkbox is selected than in responsive checkbox is not getting selected

Reply
matt g says:

April 11, 2018 at 5:16 pm

worked perfect…thank you for saving me lots of time!

Reply
1. Michael Ryvkin says:
  
  April 11, 2018 at 5:49 pm
  
  Thanks, Matt!
  
  Reply
Jose says:

May 10, 2018 at 9:32 am

It doesn’t work properly on ‘select’ items. For instance:

1. Get in responsive mode and show hiding columns
2. Select the checkbox
3. Hide columns
4. Show columns

–> Then the chexbox item in not selected

¿Any solution?

Thanks!

Reply
1. Michael Ryvkin says:
  
  May 10, 2018 at 10:47 am
  
  Jose, thanks for your comment.
  
  Are you trying the steps above in the table under “Solution” heading? Because it works correctly for me.
  
  However I discovered that it wasn’t remembering unchecked checkboxes when it appeared in the child row. I have corrected the code so it should now work as expected.
  
  Reply
  1. Sudha Mathew says:
    
    September 1, 2018 at 11:22 am
    
    Michael, can you tell what is the fix for remembering the unchecked checkboxes when the checkbox appears in the child row. This is happening for me too.
    
    Reply
Sudha says:

September 1, 2018 at 4:14 am
I have a multiselect checkbox in place of the single in a similar implementation of this article. But the below line ends up checking all my checkboxs for the same name if first checkbox is checked. It just doesn’t get the other elements.
```
     if($el.prop('checked')){
         $('input', $html).attr('checked', 'checked');
     } 
```
Can you please help me? Thanks.
Reply
Jay Asbury says:

May 7, 2019 at 12:38 pm

They have an editor that provides editing functionality. You don’t need to have input ui in the table.

Reply
1. Michael Ryvkin says:
  
  May 7, 2019 at 12:49 pm
  
  Agree, DataTables Editor is a very powerful tool, but not everyone needs to purchase it to have a simple checkbox or dropdown in the table. My article shows a solution for preserving field values in the table with responsive extension when screen size changes.
  
  Reply
Amir says:

March 14, 2020 at 2:46 am
This example does not work when we want to display the table on a search result. Can you please see the below code and give some feedback?
```
$(document).ready(function (){
   $("#btnSearch").click(function () {        
      $("#divTable").show();
      //$("#divTable").css("display","inline");
   });
});
```
Reply
Amir Qasim says:

March 16, 2020 at 10:17 am

Thanks for posting this. Can you please provide an example with columns in the jQuery DataTables? I tried it, but the solution is not working if we use “Columns” & “columnDefs” in the jQuery DataTables definition.

Reply
Miky says:

May 29, 2024 at 9:16 am

I want this same implementation for my vue3 project

Reply

Problem

Solution

Other examples

You May Also Like

Michael Ryvkin

Comments

Leave a Reply Cancel reply