Answers

• kthorngren Posts: 21,329Questions: 26Answers: 4,949

  August 2018

  You might need to add .draw() to your columns.adjust() line as shown in the docs.

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

  August 2018

  Thanks Kevin, but the result is the same.
• fotosvinadelmar Posts: 19Questions: 2Answers: 1

  August 2018

  now change my code to :

  $('.tabla1').load('acciones/cargarTablaPresupuestoAjax.php?idPresupuesto='+$('#idPresupuesto').val(), function () {
                   
            var table = $('table.display').DataTable().responsive.recalc();
             $(".collapse").on('shown.bs.collapse', function(){
                var table = $('table.display').DataTable().responsive.recalc();
                table.columns.adjust().draw()
            });
           
            $('#preloader').fadeOut('slow');
            toastr.success('Actualizando Presupuesto...', 'Presupuesto', {timeOut: 1500});
        });
        
  

  With no success
• fotosvinadelmar Posts: 19Questions: 2Answers: 1

  August 2018

  Now i change to this, with succes on load the tables:

   $(".collapse").on('shown.bs.collapse', function(){
                var table = $('table.display').DataTable({'autoWidth':false}).responsive.recalc();
                
            });
  

  But now when open the collapse component aggregate other search bar to datatable

  what's wrong?
• colin Posts: 15,240Questions: 1Answers: 2,599

  August 2018

  It might also be worth adding a call to responsive.rebuild() before the responsive.recalc(). If that doesn't help, would you be able to link to the page so we can take a look.
• fotosvinadelmar Posts: 19Questions: 2Answers: 1

  August 2018

  Hi colin i use the responsive.rebuild with no effects.
  After the Jquery.load(). i put this code but when open a collapsable the search input and the select show entries repeat when reopen a collapsible

  $(".collapse").on('shown.bs.collapse', function(){
                var table = $('table.display').DataTable({'autoWidth':false});              
            });
           
  

  
• colin Posts: 15,240Questions: 1Answers: 2,599

  August 2018

  Hi @fotosvinadelmar ,

  Definitely something odd going on there - could you link to a test case that would demonstrate the problem?

  Cheers,

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

  August 2018

  Hi @colin , i made a reproduction in here,

  Issue reproduction

  Best regards.
• fotosvinadelmar Posts: 19Questions: 2Answers: 1

  August 2018

  i try this too with no success
  https://datatables.net/manual/tech-notes/3#Meaning
• fotosvinadelmar Posts: 19Questions: 2Answers: 1

  August 2018

  Note: Datatable Debugger shows no errors.

  15 tests complete. No failures or warnings found!
  
  
  
• colin Posts: 15,240Questions: 1Answers: 2,599

  September 2018 Answer ✓

  Hi @fotosvinadelmar ,

  If you open a second group (or reopen a single one), it tries to initialise all tables again and gives a page error.

         //here is the issue
        $(".collapse").on('shown.bs.collapse', function(){
          var table = $('table.display').DataTable({'autoWidth':false}).responsive.recalc();
          
        }); 
  

  This is initialising all tables - as all tables have class .display. You need to explicitly initialise the table being expanded, or, destroy all the current tables with destroy() before initialising the others.

  The responsive aspects are working as expected. They seem to be collapsed when the space is narrow, and not when wider. I'd say fix the reinitialising issue and see if it's behaving as expected then,

  Cheers,

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

  November 2018 edited November 2018

  i made more coding for this and finally resolved the issue creating an empty table and destroing initialization if exists .

  if ( $.fn.DataTable.isDataTable('#example') ) { $('#example').DataTable().destroy(); }

  And then filled with ajax json sourced and apply draw(true) and columns.adjust()

   $('#example').DataTable(
         {
              "responsive": true,
              "processing" : true,
              "ajax" : {
                   "url" : "source.php",
                   dataSrc : ''
               }
   }).draw(true).columns.adjust();
  

  the source.php must be <?php echo json_encode($result); ?> as echoed result.

  All this in the action of open a class named collapse to call an ajax every time when collapse is opened:

  $(".collapseName").on('show.bs.collapse', function(){
    [...]
  });
  

  Thanks.