Using single searchpane to search through two tables

Khalid Teli

Hi @sandy
I was just wondering if it is a possible to use one searchPane for two datatable much like the example given the link
live.datatables.net/basifufu/1/edit

So if we search for any value in it gets searched din both tables.

Thank you

sandy

Hi @Khalid Teli ,

No, sorry not possible. There are too many features that would throw up issues when working across two tables.

Thanks,
Sandy

Khalid Teli

Hi @sandy
Thank you for the reply.
I am sure we can have two tables and SearchPane for each table separately and that shouldn't cause a problem? or should it?

I am displaying two tables on a page and having SearchPane for each table.

My two table intilizations are as follows:

 var table = $('#contracts').DataTable({
    "dom": 'BPrtlip',
  });

   var tableOverview = $('#contractsOverview').DataTable({
    "dom": 'BPrtlip',
  });

For table one:

 "initComplete": function( settings, json ) {
    $('table').DataTable().on('select', function() {
 $('table#contracts').show();
   $('#contracts_wrapper').children('div.dataTables_scroll').show();  

  $('div#contracts_info').show();
  $('div#contracts_filter').show();
  $('div#contracts_paginate').show();
      $('div#contracts_length').show();
  });

        $('table').DataTable().on('deselect ', function() {
  $('table#contracts').hide();
   $('#contracts_wrapper').children('div.dataTables_scroll').hide();  

  $('div#contracts_info').hide();
  $('div#contracts_filter').hide();
  $('div#contracts_paginate').hide();
      $('div#contracts_length').hide();
  });
}

For table two
"initComplete": function( settings, json ) {

    $('table').DataTable().on('select', function() {
         $('table#contractsOverview').show();

   $('#contractsOverview_wrapper').children('div.dataTables_scroll').show();  

  $('div#contractsOverview_info').show();
  $('div#contractsOverview_filter').show();
  $('div#contractsOverview_paginate').show();
      $('div#contractsOverview_length').show();
  });
}

I am trying to do exactly same as shown in this example but for two seperate tables
live.datatables.net/fijitaxa/1/edit,
Which is hiding the table initially and then showing the table on selection in searchPane is.
However, it causes an error: when I click on the value in table of first searchPane it shows both tables?

Q2) on deselect it hides the table,
$('table').DataTable().on('deselect ', function() {

is there a way to hide on deselect all?
Currently if you deselect a single value, it hides the datatable. Ideally, it should hide the table when you deselect all values.
Thank you

sandy

Hi @Khalid Teli ,

I am sure we can have two tables and SearchPane for each table separately and that shouldn't cause a problem?

You can have one SearchPanes per table, so yes it is possible to have a page with 2 DataTables where each have their own SearchPanes.

However, it causes an error: when I click on the value in table of first searchPane it shows both tables?

Your listeners are not accurate enough. You are just setting the listener on all of the table elements on the page, if you have more than one table then you will need to be more specific than that.

Currently if you deselect a single value, it hides the datatable. Ideally, it should hide the table when you deselect all values.

If you want to do this then you will need to loop over all of the SearchPanes DataTables and check that none of them have a selection present. Then if you establish that there are none you can hide everything. This thread shows how to get the selected rows with SearchPanes.

Khalid Teli

@sandy Thank you

Your listeners are not accurate enough. You are just setting the listener on all of the table elements on the page, if you have more than one table then you will need to be more specific than that.
for example:

$('idofthetablehere').DataTable().on('select', function() {

Yes, it is confusion between the event listeners. I tried to link the table name for each table event but didn't work. While doing to hit and trial methods, table.on('search.dt', function (){ this seems to work but I don't know why this wont work $('idofthetablehere').DataTable().on('select', function() {

"initComplete": function( settings, json ) {
 table.on('search.dt', function (){ 
$('table#contracts').show();
   $('#contracts_wrapper').children('div.dataTables_scroll').show(); 

  $('div#contracts_info').show();
  $('div#contracts_filter').show();
  $('div#contracts_paginate').show();
      $('div#contracts_length').show();
  });

}

Thank you

sandy

Hi @Khalid Teli ,

Can you create a test case for this please? I think that is the best way for us to solve your issues.

Thanks,
Sandy

Khalid Teli

Hi @sandy
I am currently using localhost but I did my best to create a replicate of Issue
live.datatables.net/xorusezi/1/edit
when I change the listeners to each table separately, they still don't work.

$('tabletwo').DataTable().on('select', function() {

and
$('tableone').DataTable().on('select', function() {

Thank you

colin

You've got

  $('#tableone').DataTable().on('select', function() {

but tableone is a variable, and #example is the Id of the table.

Could you fix that please and if still an issue, please give instructions on how to reproduce,

Colin

Khalid Teli

@colin
Sorry, it was a mistake.
I started with giving the table id's , which is #example and #exampletwo and it doesn't work .

I have updated it:

live.datatables.net/ganelode/1/edit

Thank you

kthorngren

Sounds like you are trying to target the select event for a specific SearchPane. Try using columns.searchPanes.className to assign different classnames to each SearchPane. Then change your original selector to include the classname, something like this:

$('table.my-class').DataTable().on('select', function() {

Where my-class is the className you assigned.

Kevin

Khalid Teli

@kthorngren
Thank you for the reply , I tried it but still not working

live.datatables.net/jijucoka/1/edit?html,css,js,console,output

Thank you

sandy

Hi @Khalid Teli ,

Two things here.

1. You were trying to set columns.searchPanes.ClassName which is not a valid property, note the capital C at the beginning of ClassName. It should instead be columns.searchPanes.className.
2. The class is not added to the table, but the div element for that SearchPane, so your jQuery selector needs to be something like $('div.customClassName table')...

I've made these changes to your example and it works fine now for the column where you were setting the custom class.

In order to specify a custom class name for all of the panes you will need to target more than one column in your column defs.

Thanks,
Sandy

Khalid Teli

@sandy
That indeed helped. Thank you for the valuable suggestions.

Appreciate it.