Datatables Responsive Not Working With Ajax Call

ferpalma21

Version Data Table 1.10.18
Version Responsive 2.2.6

•••••••••••Debugger code (debug.datatables.net):
JS file

let w;
var dt = $('#dt-table').DataTable({
    ajax: {
          type: 'GET',
          responsive: true,
          url: '/data/',
          dataSrc: (data) => {
            w = data.w;
            return data.data;
          }
        },
    columnDefs: [
          { targets: 0,
            className: 'control', // tried without it
            render: function ( data, type, row, meta ) {
              return row.i;
            },
          },
           { targets: 1,
             render: function ( data, type, row, meta ) {
               return row.typ;
             }
            },
            { targets: 2,
              render: function ( data, type, row, meta ) {
                return row.dea;
               }
             },
             { targets: 3,
               render: function ( data, type, row, meta ) {
                 return row.in;
                }
              },
             { targets: 4,
               render: function ( data, type, row, meta ) {
                 return row.rat;
                }
              },
             { targets: 5,
               render: function ( data, type, row, meta ) {
                 return row.se;
               },
             },
             { targets: 6,
               render: function ( data, type, row, meta ) {
                 return row.cerm;
                }
              },
             { targets: 7,
               render: function ( data, type, row, meta ) {
                 return row.ter;
                }
              },
            { targets: 8,
              render: function ( data, type, row, meta ) {
                return row.av
               },
             },
            { targets: 9,
              render: function ( data, type, row, meta ) {
                return row.acr
               },
             },
            ],

     order: [ [ 0, "asc" ]],
     autoWidth: false,
     stateSave: false,
     dom:
    "<'row '<'col-12 text-left pdb-3x'i><'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
     "<t>" +
     "<'row align-items-center'<'col-6 text-left'p>>",
     paging: true,
     lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
     pageLength: -1,
     language: {
          "search": "",
          "searchPlaceholder": "Type in to Search",
          "lengthMenu": "Show _MENU_  Data",
          "info": "Showing _START_ to _END_ of _TOTAL_ Data",
          "infoEmpty": "Showing 0 to 0 of 0 Data",
          "infoFiltered": "(filtered from _MAX_ total Data)",
          "paginate": {
              "first":      "First",
              "last":       "Last",
              "next":       "Next",
              "previous":   "Prev"
          },
      },
  });
 ```
Parameters I passed in the responsive key other than true, next object:
 ```
{
            details: {
              type: 'column',
              target: 0 // tried also with 1 and 2
            },
            breakpoints: [
             {name: 'bigdesktop', width: Infinity},
             {name: 'meddesktop', width: 1480},
             {name: 'smalldesktop', width: 1280},
             {name: 'medium', width: 1188},
             {name: 'tabletl', width: 1024},
             {name: 'btwtabllandp', width: 848},
             {name: 'tabletp', width: 768},
             {name: 'mobilel', width: 480},
             {name: 'mobilep', width: 320}
           ]
}
 ```

HTML FIle

    <table id="dt-table class="table table-bordered table-hover" style="width:100%;">
      <thead>
        <tr>
          <th class="dt-i text-left text-secundary">
            I
          </th>
          <th class="dt-typ">
            Typ
          </th>
          <th class="dt-dea">
            Dea
          </th>
          <th class="dt-in">
            In
          </th>
          <th class="dt-rat">
            Rat
          </th>
          <th class="dt-se">
            Security
          </th>
          <th class="dt-cerm">
            Cerm
          </th>
          <th class="dt-ter">
             Ter
          </th>
          <th class="dt-av">
            Av
          </th>
          <th class="dt-ac"></th>
        </tr>
      </thead>
    </table>

```
Error messages shown: No error message
Description of problem: When used a ajax call to insert the data into the table the responsiveness doesn't work, but when it's done by initializing the datatable after, it does work... for my project I required to do it all through ajax..

kthorngren

Looks like the problem is you have responsive: true, inside the -option ajax` option:

    ajax: {
          type: 'GET',
          responsive: true,   // Move this outside of the ajax option
          url: '/data/',
          dataSrc: (data) => {
            w = data.w;
            return data.data;
          }
        },

Kevin

kthorngren

Looks like you have responsive: true, inside the ajax option but it should be outside of it:

    ajax: {
          type: 'GET',
          responsive: true,  // Move this outside of the ajax option
          url: '/data/',
          dataSrc: (data) => {
            w = data.w;
            return data.data;
          }
        },

Parameters I passed in the responsive key other than true, next object:

This isn't clear to me as you just show the options without context of the rest of your code. Doesn't look like this code snippet is part of your Datatables init code. If you still need help please post a link to your page or a running test case showing the problem so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ferpalma21

Thank you very much for your help, my silly error!