How to display several datatable?

SBD999

Hi, I saw that it was possible to display several data tables in a page thanks to the "class=display"

I need to display 20 tables on the same page. I would like to introduce select input or dropdownlist which would give me the ability to choose which table to display.

First of all I would like to know if this is possible. If yes, do you have any examples?

Thanks in advance to your reply!

allan

Sure that is possible. This example shows multiple tables on a page, and you could then use divs with visibility controlled through your dropdown.

Allan

SBD999

Great it's a good news. I've also seen your example.
you could then use divs with visibility controlled through your dropdown.

Have you some examples with dropdown?

allan

I don't have an example of specifically that, but a few lines of JavaScript should do it. It isn't DataTables specific.

Allan

SBD999

Ok
Concerning the example of the datatable, if I do understand it's possible to display two table in the same page

JS script
$(document).ready(function ({ $('table.display').DataTable(); });

In Html I display the tables as below

Table 1 :<table id="" class="display" style="width:100%">

Table 2:<table id="" class="display" style="width:100%">

In my code : I use server process = true.
I have 20 tables in same database.
I have to create 20 JS scripts with table.display. How to distinguish all the tables?

tangerine

Use a different id for each table.

rf1234

You give them names and address them by id, not by class. First assign a different id to each table in your HTML.

var table1 = $('#table1').DataTable();
var table2 = $('#table2').DataTable();

table1
    .on('select', function() {
          ... do something
    });

SBD999

Thanks to your reply.
Currently I only have a table defined as follows in wvieWerDatatable.js

$(document).ready(function () {
    $('#wvieWerDatatable').dataTable({
      
        "processing": true,
        "serverSide": true,
        "filter": true,
        "ajax": {
            "type": "POST",
            "url": "/api/wSerie/doc",
           "datatype": "data.json"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false,
            
        }],
       "columns": [
                { "data": "created", "name": "created", "autoWidth": true}
            
        ]
    });
});

If I take your example
1- I defined a scripts table.js
2- In table;js
I defined two variables

var table1 = $('#table1').DataTable();
var table1 = $('#table1').DataTable();

I defined the datatable as below for table 1 and the same thing for table2

table1.on('select', function() {
         "processing": true,
        "serverSide": true,
        "filter": true,
        "ajax": {
            "type": "POST",
            "url": "/api/wSerie/doc",
           "datatype": "data.json"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false,
            
        }],
       "columns": [
               { "data": "created", "name": "created", "autoWidth": true}
                 ]
    });
    });

3- In Html

I put the link of the table.js in @section
<script src="~/js/table.js"></script>

To display the table I put the link of the table1 and 2 as below

<div><a href= "/table/table1">tab1</a></div>
<div><a href= "/table/table2">tab1</a></div>

rf1234

Sorry, but I don't understand why you put your data table initialization into a "select" event handler. Is that really what you want? My code was just an example of what you can do if your data tables are named: E.g. you can attach an event handler and "do something" inside it

SBD999

Ok.
So first I defined the datatable() with the name e.g table1 and table 2
In Html I define the var table1 et table 2 and I use "select" as below to display the table 1 for example.Is that it?

table1
    .on('select', function() {
          ... do something
    });

SBD999

so, I tried it and now I've to insert the "...do something "
The "do something" must to hide or show tab 1 or tab2.
Have an idea?

kthorngren

See this bootstrap tabs example:
https://www.datatables.net/examples/api/tabs_and_scrolling.html

Kevin

SBD999

Thanks! but I wasn't able to adapt it for my case.
I would like to put only 2 links in web page to show the datatable.

allan

I'd suggest you start by forgetting the DataTable and just building a select that will swap the display between:

<div id="one">
  One
</div>
<div id="two">
  Two
</div>

Allan

SBD999

@kthorngren
Sorry I've wrote tab1 and tab2 but I don't want to use it but only the link.

This means in my web page I put 2 links when I click on it I would like to hide or display the datatable.

So I don't know how I can associate the ID in html with the action to display the datatable (JS)
I think I've to use the code below where I define the datatable. But I don't know
How I can add display:none or true

table1
    .on('select', function() {
          ... do something
    });

rf1234

The best could be to start over with this, I guess.

So what is it that you are trying to achieve? I mean the business outcome, not some coding details.

If I recall it correctly you have about ten data tables. For what purpose? Are they all the same or are they different? Are they interlinked? If so, how? What should the user be able to do with the tables?

My coding example that you quoted above is just an example to illustrate that if you assign a name to a data table you can later address it to assign an event handler for example. This was in response to your question on how to distinguish the tables.

The data tables "select" event handler is used to capture the row selection event. Every time you select a row from your data table it gets triggered. You seem to think it is something different?!

Could you please also make a test case to illustrate your issue. Thanks.

SBD999

Hi, thanks to your reply. You will find below the answer to your question

I mean the business outcome, not some coding details.

First of all, my application has no commercial purpose.
The purpose of my application is to display the contents of several tables. In these tables there are files.
I have added hyperlinks in table to open the files. The result for one table is functional. I used jquery datatable server side to improve the performance of the file access. It's perfect!
Now I have several tables and I want to give the user the possibility to access one of the tables by a "simple" link from my web page.

For what purpose?

In each table there is a specific file content that is used in several specific cases.

Are they all the same or are they different? 

As you have understood the content has a specific use but the number and name of the columns are the same for each table

Are they interlinked?

No, the tables are not linked. The tables are located in the same database.

What should the user be able to do with the tables?

The user must be able to choose one of the tables and then he can search for a file and open it

Could you. please also make a test case to illustrate your issue.

In html

  <div id="table1" class="col-md-4 align-items-center d-flex">
                                <a href="table1">table1</a>
                            </div>
                             <div  id="table2"class="col-md-4 align-items-center d-flex">
                                <a id="table2" href="table1">table2</a>
                            </div>

@section Scripts
{
    <script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>
    <script src="~/lib/datatables/js/dataTables.bootstrap4.min.js"></script>
    <script src="~/js/JsTable.js"></script>
   
   
}

In IsTable

 if($('#table1').DataTable().display != "none"){
    ('#table1').DataTable().style.display = "none";
  } else {
    ('#table1').DataTable().style.display = "block";
  }

 $('#table1.table').dataTable({
      
        "processing": true,
        "serverSide": true,
        "filter": true,
        "ajax": {
            "type": "POST",
            "url": "/api/wSerie/doc",
           "datatype": "data.json"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false,
            
        }],
     
        "columns": [
         //....
            { "data": "created", "name": "created", "autoWidth": true}
            //...
        ]
    });
});

This is where I am now!

SBD999

I think it will be better if I do that

 <div id='divTable'>
     <table>
     </table>
 </div>

 $('#divTable').hide();

But applying a hidden to an element such as a div for example will simply hide that element but will not remove it from the page flow which means that the space it occupied when it was visible will be retained.

Have you an other method?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

SBD999

I've tried to use the example here : https://datatables.net/extensions/buttons/examples/flash/hidden.html

 <button id="vis">Hide/Show</button>
                <table id="table1" class="table table-striped table-bordered dt-responsive nowrap" width="100%" >
                    <thead>
                       ...
                    </thead>
                      <tbody>               
                     </tbody>
                </table>

 $('#table1').wrap('<div id="hide" style="display:none"/>');
 $('#table1.table').dataTable({  });
 $('#vis').one('click', function () {
        $('#hide').css('display', 'block');
    });

This works well.
When I launch the application table1 is not visible, normal!
Then I click on the button to display table1 ok, normal!
But I would like to be able to hide after the first click. So I miss something!

colin

Please post a test case that replicates the problem you're seeing,

Colin

SBD999

with the code below there is no problem

$('#table1').wrap('<div id="hide" style="display:none"/>');
$('#table1.table').dataTable({  });
$('#vis').one('click', function () {
       $('#hide').css('display', 'block');
   });

I would like to add the code below to put display = "none" when I click on button

  $('#vis').on('click', function () {
        if (table1.display = "none") { table1.css('display', 'block'); }
        else if (table1.display = "block") { table1.css('display', 'none'); }
       });

And I don't understand why it doesn't work. Is it a writing problem?Do you have any suggestions? I will appreciate your help!

I've put here the test :
live.datatables.net/qeqikosi/1/edit

tangerine

if (table1.display = "none" ....
else if (table1.display = "block") ....

You are using assignment operators where you should be using conditionals (==).

SBD999

Thanks, I changed it and I have no more errors.

But now the button is not operational when I click. I don't see where is the problem.

SBD999

So right now the button is operational.

 let vis = document.getElementById("vis");
    let table1 = document.getElementById("table1")

    vis.addEventListener("click", () => {
        if (getComputedStyle(table1).display != "none") {
            table1.style.display = "none";
        } else {
            table1.style.display = "block";
        }
    })

The code below hide and show the datatable BUT I always search, entries and paging.
How I can modify the code below to hide search, entries and paging?

kthorngren

Use the dom option.

Kevin

allan

You are showing and hiding the table element, not its wrapper. You don't want to do that.

Like I said above (honestly, I've been doing this a long time - try this approach), take two div elements:

<div id="one">
  One
</div>
<div id="two">
  Two
</div>

Add a select which you add an event listener to that will show and hide each div based on the selection.

Once you have that working, all you have to do is put a DataTable in each div.

Allan

SBD999

I've made the test case that's represent my configuration, I don't understand why it's not functionnal?
here :live.datatables.net/rebituso/1/edit

SBD999

Thanks to your support. It's OK.

SBD999

Hi, finally it's not functionnal. IN previous post I only put one table1.
Now I've put table2.
I've made the test case here live.datatables.net/moriyimi/1/edit

Have you some advise? thanks in advance

rf1234

http://live.datatables.net/suqayoxe/1/edit