Answers

• sandy Posts: 913Questions: 0Answers: 236

  December 2020

  Hi @Khalid Teli ,

  Take a look at this example that I've put together. Hopefully it can get you started.

  Thanks,
  Sandy
• Khalid Teli Posts: 251Questions: 71Answers: 0

  December 2020 edited December 2020

  @sandy
  Thank you. as I am using ajax souirce data so I had to move it insideinnitcomplete function. However, the deselect doesnt seem to work

   "initComplete": function( settings, json ) {
      $('div.dtsp-searchPanes table').on('select.dt', function(){ 
  
       $('table#products').show();
        $('div#products_info').show();
        $('div#products_filter').show()
        $('div#products_paginate').show();
            $('div#products_length').show();
  
    })
                 $('div.dtsp-searchPanes table').on('deselect.dt', function(){    
  
       $('table#products').hide();
        $('div#products_info').hide();
        $('div#products_filter').hide()
        $('div#products_paginate').hide();
            $('div#products_length').hide();
  
    })
  

  thanks to @kthorngren who helped me with this few months back.

  Also, any luck with this ? https://datatables.net/forums/discussion/comment/182471#Comment_182471
• colin Posts: 15,240Questions: 1Answers: 2,599

  December 2020 Answer ✓

  Could you modify Sandy's example to demonstrate the problem, please.

  And yep, that other issue has been addressed, I've made a comment on that thread,

  Colin
• Khalid Teli Posts: 251Questions: 71Answers: 0

  December 2020

  @colin thank you

  As, I work on local host , it is difficult to replicate the issue. I have tried to replicate what I can

  1) When i putScrollx: true , the table header doesn't hide

  live.datatables.net/zazebapi/1/edit

  2) when Iselect any value in the search pane the table appears. However when I deselectthe value the table doesn't hide . Deselecting the value should make table diappear similar to as shown in example above.

   "initComplete": function( settings, json ) {
  
  
  $('div.dtsp-searchPanes table').on('select.dt', function(){ 
   $('table#products').show();
    $('div#products_info').show();
    $('div#products_filter').show()
    $('div#products_paginate').show();
        $('div#products_length').show();
  
    })
  
  $('div.dtsp-searchPanes table').on('deselect.dt', function(){   
        $('table').DataTable().on('deselect', function() {
       $('table#products').hide();
        $('div#products_info').hide();
         $('div#products_filter').hide()
         $('div#products_paginate').hide();
            $('div#products_length').hide();
  
    })
  
  
  
  
    }
  
• colin Posts: 15,240Questions: 1Answers: 2,599

  December 2020 Answer ✓

  DataTables uses an overlay for the scrolling, so you need to hide that too:

  $('#example_wrapper').children('div.dataTables_scroll')
  

  See here - that fixes both of those points,

  Colin