Answers

• sandy Posts: 913Questions: 0Answers: 236

  December 2020 edited December 2020

  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 Posts: 251Questions: 71Answers: 0

  December 2020

  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 Posts: 913Questions: 0Answers: 236

  December 2020

  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 Posts: 251Questions: 71Answers: 0

  December 2020

  @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 Posts: 913Questions: 0Answers: 236

  December 2020

  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 Posts: 251Questions: 71Answers: 0

  December 2020

  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 Posts: 15,240Questions: 1Answers: 2,599

  December 2020

  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 Posts: 251Questions: 71Answers: 0

  December 2020

  @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 Posts: 21,341Questions: 26Answers: 4,954

  December 2020

  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 Posts: 251Questions: 71Answers: 0

  December 2020

  @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 Posts: 913Questions: 0Answers: 236

  December 2020 Answer ✓

  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 Posts: 251Questions: 71Answers: 0

  December 2020

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

  Appreciate it.