Answers

• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  October 2018

  Can you give me a link to a test case showing the issue so I can help to debug it please?

  You might need to call columns.adjust() once the table has been fully shown. It depends on when in the modal's load and display sequence the table is being initialised.

  Allan
• fotosvinadelmar Posts: 19Questions: 2Answers: 1

  October 2018

  Hi Allan thanks for your response i made a test case
  https://test.scmingenieria.cl/

  Click on the green button to show modal with the responsive issue.

  i use columns.adjust() after load and nothing's happend
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  October 2018 Answer ✓

  Thanks for the link! The issue is that the table is hidden when it is initialised. So columns.adjust() is the fix, but you need to call it when the table is made visible. You have it in an accordion, so you would need to listen for that accordion's "shown" event (or whatever event it is that the library you are using for the accordion fires off).

  Allan
• fotosvinadelmar Posts: 19Questions: 2Answers: 1

  October 2018 edited October 2018

  hi allan thanks for your kind response i have an image that shows the issue in test link:
  

  in my jquery load i bring the code to collapse attached to click event on any named on body like this
  ´´´

  $("body").on("click",".botonAgregarItemRequisicion",function(e){
  var idRequisicion = $(this).attr('data-idrequisicion');

  console.log()
  $('input[id="idRequisicionAgregarItem"]').val($(this).attr('data-idrequisicion'));
  urlToLoad = 'acciones/obtenerAgregarItemRequisicion.php?idRequisicion='+idRequisicion;
  //console.log(urlToLoad);
  $('#modalAgregarItemRequisicion .modal-body-interno').load(urlToLoad,function(){
      //$("#modalMostrarVersionesRequisicion").modal('toggle');
  
    $("#myform2").validate();
    var table = $('#tablaItemesRequisicion').DataTable({responsive:true});
  
  
  $("body").on('shown.bs.collapse','a[data-toggle="collapse"]', function(e){
    console.log("aaaaaaaaaaaaaaaaa");
    $($.fn.dataTable.tables(true)).DataTable()
       .columns.adjust()
       .responsive.recalc();
  

  });

  });
  

  ´´´

  and when put the same in console using functions bring me the required result in screen.
  then i put the same javascript code in console and attach now two images that represent the live error allan:
  

  the next image shows the requires on load result and shows the interaction into datatables colmns adjust recomendation
  

  Please let me know if you now why i can't initialize the responsive feature when i click on a.collapse.

  Thanks.

  Jeison.
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  October 2018

  Hi Jeison,

  The error message shows you are calling:

  $(...).DataTables()
  

  note the plural s. There is no such method added to jQuery. It is $(...).DataTable(). Remove the s and that should resolve that issue.

  Allan
• fotosvinadelmar Posts: 19Questions: 2Answers: 1

  October 2018 edited October 2018

  hi allan if you see after i fixed the typing error.
  And set correctly the function.
• fotosvinadelmar Posts: 19Questions: 2Answers: 1

  October 2018 Answer ✓

  i found a solution make an empty table on modal and replace Jquery.load for Jquery.Ajax() function fill table with ajax Datatable.

  $("body").on("click",".botonAgregarItemRequisicion",function(e){

  var idRequisicion = $(this).attr('data-idrequisicion');
  
  $('input[id="idRequisicionAgregarItem"]').val($(this).attr('data-idrequisicion'));
  urlToLoad = 'acciones/obtenerAgregarItemRequisicion.php?idRequisicion='+idRequisicion;
  var d = new Date();
  var n = d + " "+ d.getMilliseconds();
  console.log(n);
  $.ajax({
      type: 'GET',
      url: urlToLoad,
      data: 'descripcion=aaaaa',
      beforeSend: function () {        },
      success:function(data){
      if ( $.fn.DataTable.isDataTable('#tablaItemesRequisicion2') ) {
        $('#tablaItemesRequisicion2').DataTable().destroy();
      }
  
  
      $('#tablaItemesRequisicion2 tbody').empty();
  
        $('#tablaItemesRequisicion2').DataTable({
            "responsive": true, 
            "processing" : true,
            "ajax" : {
                "url" : urlToLoad,
                dataSrc : ''
            },
            "columns" : [...]
        }).columns.adjust();     
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
              console.log("Status: " + textStatus); alert("Error: " + errorThrown);
      }
    });
  
  });