But this would look better (in my opinion) if the buttons maintained the same size in the previous screen clip and were displayed centered.

After I upgraded from DataTables version 1.10.15 to 2.3, the Responsive extension now shows "undefined" instead of the column names of the columns that cannot be shown in the row:

body {
background: #ffffff;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
position: static !important;
margin:0;
}

body div#fullContainer {
height: 100%;
position: absolute;
width: 100%;
}

body div#fullContainer #content-wrap {
background: #ffffff;
Colour:#000000;
bottom: 0;
box-shadow: -5px 0px 8px #ffffff;
position: absolute;
top: 0;
width: 100%;
z-index: 1250;
}

body div#fullContainer #content-wrap main {
margin: 5px;
overflow: auto;
}

https://codepen.io/adamdilger/pen/JoPKQOE?

Debugger code (debug.datatables.net):

No debugger code

Error messages shown:

No error message

Description of problem:

When initialising a hidden table with the responsive plugin, when the table is made visible, the .dt-empty column has the wrong colspan attribute, making it look incorrect.

The issue I believe is in this line of the responsive plugin, which sets the colspan to 1 on init:

// If no records, update the "No records" display element
if (dt.page.info().recordsDisplay === 0) {
   $('td', dt.table().body()).eq(0).attr('colspan', visible); // <-- here
}

Our use case is we initialise a datatable in a bootstrap 3 tab which is hidden, when the tab is switched to the table looks off.

I did notice that version 2 of this plugin (when used with datatables v1) made the same calculation + attribute modification, but in the older versions the table had an empty body at this point, and thus no attribute change was made.
I believe this commit may have something to do with this, which adds in the empty row before the responsive plugin is initialised.

I suppose the question is, are we initialising the responsive plugin incorrectly, or is this visible count being incorrectly calculated.

Thanks! Let me know if there's anymore information you need me to get for you

Description of problem:
DataTables 2 and Responsive 3.0.3 -- with multi-row headers are not displayed properly. If I remove dt-responsive from the <table>, all displays fine.

NOTE: We do not use Responsive that much with multi-row headers (only 2 tables) -- for those in question, I would also be ok with just changing them to be single-row headers -- as a workaround.

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

I was trying to implement slide-open row details. I saw you have worked on this before:
https://datatables.net/forums/discussion/52735/datatables-responsive-child-row-sliding-animation

I implemented your code:

function DTformat(api, rowIdx, columns)  
   {var data = $.map(columns, function(col, i) 
                               {return col.hidden ?
                                  '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                                    '<td><b>' + col.title + '</b></td> ' +
                                    '<td>' + col.data + '</td>' +
                                  '</tr>' :
                                  '';
                               }
                    ).join('');
    return data ? '<div class="slider"><table>' + data + '</table></div>' : undefined;
   }

//$dtResponsive   = 'responsive: {orthogonal: \'responsive\'}, deferRender: true, ';
  $dtResponsive   = 'responsive: {details: {renderer: function(api, rowIdx, columns) '
                  .                                   '{var data = DTformat(api, rowIdx, columns); '
                  .                                    'return data ? data : false; '
                  .                                   '}, '
                  .                         'display: function(row, update, render) '
                  .                                   '{if (update) '
                  .                                     '{if ($(row.node()).hasClass(\'parent\')) '
                  .                                       '{row.child(render(), \'child\').show(); '
                  .                                        '$(\'div.slider\', row.child()).slideDown(0); '
                  .                                        'return true; '
                  .                                       '} '
                  .                                     '} '
                  .                                    'else '
                  .                                     '{if (!row.child.isShown()) '
                  .                                       '{row.child(render(), \'child\').show(); '
                  .                                        '$(row.node()).addClass(\'parent shown\'); '
                  .                                        '$(\'div.slider\', row.child()).slideDown(); '
                  .                                        'return true; '
                  .                                       '} '
                  .                                      'else '
                  .                                       '{$(\'div.slider\', row.child()).slideUp(function() '
                  .                                                                              '{row.child(false); '
                  .                                                                               '$(row.node()).removeClass(\'parent shown\'); '
                  .                                                                              '} '
                  .                                                                            '); '
                  .                                        'return false; '
                  .                                   '} } }'
                  .             '}         }, deferRender: true, ';

There is the slide-closed animation I want, but there is no slide open animation.

Also the detail row contents look totally different with the headers on the left (I kinda like it for desktop, but I would need to re-design, and I need to stick to the vertical layout if the details row is opened on mobile).

What is the current recommended way to slide-open/close a responsive details row (without changing the layout)? When there are multiple tables with multiple open details rows on a single page, the animation really helps users.

Currently the DOM for the responsive modal is placed before the closing </body> tag.
Is it possible to tell it where/what parent element to be inserted into?

it seems the Responsive extension is missing version 3.0.1

https://cdn.datatables.net/responsive/3.0.1/css/responsive.dataTables.min.css

Regards
Mark Donszelmann

Mobile-first design demands using Responsive nearly everywhere.

Use of Child Rows per above example to display Row Details is limited. Responsive uses Child Rows, and modal display of Row Details is unacceptable.

What is the best workaround to use both options simultaneously (Responsive and display Row Details)?

I've been working for days on an example ( https://live.datatables.net/fowitaqu/3/ ) that attempts using responsive.details.renderer in combination with the above referenced example. It isn't easy, and I did not expect it to be easy :-)

It doesn't help that responsive.details.renderer executes with screen resize and not only when the number of columns hidden is changed.

Responsive would ideally have row-level enable / disable via API, or at least ability to cancel render in responsive.details.renderer (i.e. if cancel then don't touch the child row details). But this doesn't seem possible.

Has anybody else worked on such a workaround or have a suggested approach?

It sounds like any columns that are currently "hidden", due to the Responsive extension showing them in a child row -- that they should still be included when you do an Excel export. And, it seems like I remember seeing that being the case in the past (though, that probably doesn't mean anything! )

However, that is not what I'm experiencing. The few tables that we use Responsive with -- when the screen is wide, all columns are included in the Excel export. But when the screen is narrow, the "collapsed in child row" columns are not exported. Is this the expected behavior? And if not, could there be something I'm doing wrong or need to set?

https://live.datatables.net/hocicoro/1/edit

Thanks for tips.

Thanks for all tips.

I have tried applying
white-space: normal to the columns via columnDef with no result/change

This works (class "hidden" is a Bootstrap class; you might want to use somehting else).

table.on( 'responsive-display', function ( e, dt, row, show, update ) {
        var x = row.index();
        $('tbody tr.child td.child ul li[data-dt-row="' + x + '"]').each(function(){
            if ( $(this).find('.dtr-data').text() <= "" ) {
                $(this).addClass("hidden");
            } else {
                $(this).removeClass("hidden");
            }
        })
    })

    $('.tablas').DataTable({

        language: {
            sProcessing: "Procesando...",
            sLengthMenu: "Mostrar _MENU_ registros",
            sZeroRecords: "No se encontraron resultados",
            sEmptyTable: "Ningun dato esta disponible",
            sInfo: "Mostrando registros del 0 al 0 de un total de 0",
            sInfoFiltered: "Filtrando un total de _MAX_ registros",
            sSearch: "Buscar:",
            sLoadingRecords: "Cargando...",
            oPaginate: {
                sFirst: "Primero",
                sLast: "Ultimo",
                sNext: 'Siguiente',
                sPrevious: "Anterior",
            },
            oAria: {
            sSortAscending:
                ": Activar para ordenar la columna de manera ascendente",
            sSortDescending:
                ": Activar para ordenar la columna de manera descendente",
        },
        },
        responsive: true,          
      });

    $('#DataTables_Table_0_filter label input').addClass('border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mb-2 h-8');
    $('#DataTables_Table_0_filter label').addClass('font-bold');
    $('#DataTables_Table_0_length label select').addClass('border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm h-8 w-12 mr-1 text-xs');

my table and buttons

**please helpme **

table.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
            var api = new DataTable.Api(settings);
            if ($(api.table().node()).hasClass('pageResize') ||
                settings.oInit.pageResize ||
                DataTable.defaults.pageResize) {
                new PageResize(api, settings.oInit.pageResizeManualDelta);
            }
    });

Can you point me in the right direction? Which resize function can i call in the event?
Here is a demo: https://live.datatables.net/qagufiti/4/edit
Thanks

Error messages shown: DataTables warning: table id=data-table - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Description of problem: After just adding the download script that includes Responsive (no other code changes, it works without errors with just the DataTables download script w/o the responsive ext), I'm now getting the Requested Unknown Parameter issue. I can't link to the code as it's proprietary, but I can include some info-redacted code snippets below. I've read the info on the error, but none of the likely culprits seem to apply to my situation.

JS:
```let dataTable = $('#data-table').DataTable( {
createdRow: function (row, data, dataIndex) {
$(row).attr('data-record-id-value', data.id);
},
pageLength: 25,
dom: '<"search-and-length"fl>iptip',
oLanguage: {"sSearch": ""},
deferRender: true,
responsive: true,
data: dataSet,
columns: [
{
render: function(data, type) {
return <input type="checkbox" class="bulk-action-checkbox"></input>
}
},
{
title: "1",
data: 'id'
},
{
title: "2",
data: 'object_type'
},
{
title: "3",
data: 'object_name',
render: function(data, type) {
return <div class="border-container-blue text-gray-800">${data}</div>
}
},
{
title: '4',
data: 'weight',
render: function(data, type) {
return <div class="text-center">${data}</div>;
}
},
{
title: "",
data: 'battery',
render: function(data, type) {
let batteryValue = data;

          switch(true) {
            case (batteryValue > 95):
              return '<i class="fa fa-battery-full fa-rotate-270 fa-lg" style="color:green;"></i>'
              break;
            case (batteryValue > 75):
              return '<i class="fa fa-battery-three-quarters fa-rotate-270 fa-lg" style="color:green;"></i>'
              break;
            case (batteryValue > 50):
              return '<i class="fa fa-battery-half fa-rotate-270 fa-lg" style="color:orange;"></i>'
              break;
            case (batteryValue > 25):
              return '<i class="fa fa-battery-quarter fa-rotate-270 fa-lg" style="color:red;"></i>'
              break;
            default:
              return '<i class="fa fa-battery-empty fa-rotate-270 fa-lg" style="color:red;"></i>'
              break;
          }
        }
      },
      {
        title: "4",
        data: 'event_type'
      },
      {
        title: "5",
        data: 'event_message'
      },
      {
        title: '6',
        data: 'message',
        render: function(data, type) {
          return `<div data-searchable-message="true">${data}</div>`;
        }
      },
      {
        title: "7",
        data: 'assigned_to',
        render: function(data, type) {
          let select = $(`
            <div class="border-container">
              <select name="#" id="_" class="select inline w-full py-1 bg-transparent" data-action="change->event-actions#assignUserToRecord">
                <option value="">Unassigned</option>
                ${userOptions}
              </select>
            </div>
          `);
          select.find('option[value="'+data+'"]').attr('selected', 'selected');
          return select[0].outerHTML
        }
      },
      {
        title: "8",
        data: 'created_at'
      },
      {
        title: "9",
        data: 'id',
        render: function(data, type) {
          let html = `
            <div data-controller="modal" data-modal-allow-background-close="true">
                <div class="relative">
                  Test
                </div>
            </div>
          `
          return html;
        }
     ], 'columnDefs': [
    {
      'targets': [0, 11],
      'orderable': false
    },
    {
      'targets': [8],
      visible: false,
      searchable: true
    },
    {
      orderable: false,
      searchable: false,
      className: 'select-checkbox',
      'targets': [0]
    }
  ],
  language: {searchPlaceholder: "Search"},
  select: {
    style: 'multi',
    selector: 'td:first-child'
  },
  order: [[1, 'asc']]
});```

HTML:
<table class="grid-table responsive" id="data-table"> <thead> <tr> <th><input type="checkbox" id="select_all" name="select_alert" /></th> <th>1</th> <th>2</th> <th>3</th> <th class="text-center">4t</th> <th></th> <th>5</th> <th>6</th> <th></th> <th>7</th> <th>8</th> <th class="w-1/6">9</th> </tr> </thead> </table>

I have a long text string, (Description field in the example above), that I want to wrap instead of default nowrap. All of the other columns should not wrap.

The description field is hidden until we expand (+), then at that point we would like to show the Description text wrapping instead of a single, long line of text.

is this possible? Any input is appreciated.

I do NOT want the hybrid I found with the stupid green info expander. See the second screenshot, I don't want that. I need all information to be visible. i.e. expand all.

Is it okay please?

Thanks for the information.

Thanks.

Hi all,

I've got a table that's working like a dream, save for one issue.

When I try to run computations on a column of results and put them back using jQuery... it works! Right up until you collapse the responsive experience. It appears that the collapsed responsive cell stores data in a value named SPAN (dtr-data) beneath a LI and I'm not sure how to access it.

Is there possibly an API call or workaround for changing these cell values (after they go responsive) using some means other than locating it on the DOM and replacing? Because I'm not seeing a way to do that that's responsive-friendly.

Cheers.

I have a very large data table with very many columns. About one trillion of them never sees the sunlight and is always hidden in a child row. What I would like to have is some kind of heading to group the rows (which are actually table columns) inside the child row into categories. For illustration purposes I inserted those yellow lines in the screen shot below. That could be the place for a heading that could be right above a column name and then one or two line breaks or so. Or nicer ...

Those columns before or after a heading could be identified by class also on th or td level; both is easy to accomplish. I didn't find an example that I could follow but I know "responsive.details.renderer" is probably the correct path to follow.

Any suggestions or - even better - sample code? Many thanks in advance.

Not Found
The requested URL was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

The following examples use the following DataTables-features:
- Loading data via ajax (Server-side processing)
- Extension "Responsive-Design"
- Row-ID

The first example uses the default setting for responsive-design.
http://live.datatables.net/xumidoqe/1/edit?html,js,output

Steps to reproduce:
1. Shrink the browser-window, so that some of the columns will be hidden and moved to the collapsed child-rows (hidden details)
2. Click the child-rows-toggle-button to display the child-rows
3. Click the button "Reload Table"

The behaviour is that the visibility-state of the child-rows is preserved between the ajax reloads.

The second example uses the responsive-design-setting for the immediate display of the hidden details / child-rows but without use of the row-ID feature (ajax: "/ssp/server_processing.php").
http://live.datatables.net/zizawuti/1/edit?html,js,output

Steps to reproduce:
1. Shrink the browser-window, so that some of the columns will be moved to the now direct displayed child-rows.
2. Click the button "Reload Table"

The behaviour is that the visibility-state of the child-rows is preserved between the ajax reloads.

The third example uses the responsive-design-setting for the immediate display of the hidden details / child-rows and the row-ID feature. ("ajax": "/ssp/ids-objects.php")
http://live.datatables.net/qecoziwi/1/edit?html,js,output

Steps to reproduce:
1. Shrink the browser-window, so that some of the columns will be moved to the now direct displayed child-rows.
2. Click the button "Reload Table"

In contrast to the first and second example, the behavior is different now.
The behaviour is that the visibility-state of the child-rows is not continuous preserved between the ajax reloads.
With each click on the button "Reload Table" the visibility-state of the child-rows is toggled.

This is probably an bug.

What changes must be made to the third example to preserve the visibility-state of the child-rows between the table-reloads?

Link to test case: https://jsfiddle.net/vn1x72u5/1/

 $(document).ready(function () {
                var table = $('#example').DataTable({
                      responsive: true,

                    "ajax": "layouts/db_array",
                    "order": [[0, "desc"]],
                    "autoWidth": false,
                    "deferRender": true,
                   
                    "columns": [
                        {"data": "pswd"},
                        {"data": "email", "width": "5%"},
                        {"data": "name"},
                        {"data": "last_name"},
                        {"data": "phone"},
                        {"data": "gender"},
{ "data": null,

                            "defaultContent": "
<a href=\"#\" data-toggle=\"modal\" role=\"button\" class=\" delete\" >" 
                                "<span style=\"font-size: 1em; color: Tomato;\" title=\"Delete\"></span></a>
<a href=\"#\"  role=\"button\" class=\" edit\" >" 
                                "<span style=\"font-size: 1em; color: #0e148e;\" title=\"Edit\"></span></a>"
},

  $('#example tbody').on('click', '.delete', function () {//click delete
                    var row = $(this).closest('tr');
               
                    $('#myModalBox').modal("show");

                    $('.elem').text('-' + ' ' + ' ' + name);

                    var url = "user_delete/" + data + "";
                    $("#twitter_user_delete").on('click', function () {

                        $(location).attr('href', url);
                    })

                });


                $('#example tbody').on('click', '.edit', function () {//click edit
                    var row = $(this).closest('tr');

                    var data = table.row(row).data().id;
                    var url = "user_edit/" + data + "";
                    $(location).attr('href', url);
                });
});

html code standard