Only show dattable when the a value is selected in SearchPane

Khalid Teli

Hi,
How can I hide the datatable initially and then display it based on the values selected in seachpane?

For example: when I load the page m, datatable should be hidden and when I select any value using search panes it should only display the table with that selected data

Can anyone please help?
Thank you

sandy

Hi @Khalid Teli ,

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

Thanks,
Sandy

Khalid Teli

@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

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

@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

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