How to display several datatable?

How to display several datatable?

SBD999SBD999 Posts: 36Questions: 1Answers: 0
edited June 2022 in Free community support

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!

«1

Replies

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    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?

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

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

    Allan

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0
    edited June 2022

    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?

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Use a different id for each table.

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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
        });
    
  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    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>
    
  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited June 2022

    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 :smile:

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    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
        });
    
  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0
    edited June 2022

    @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
        });
    
    
  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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.

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0
    edited June 2022

    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!

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0
    edited June 2022

    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?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    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!

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0
    edited June 2022

    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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

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

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    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.

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Use the dom option.

    Kevin

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0
    edited June 2022

    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

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    Thanks to your support. It's OK.

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
Sign In or Register to comment.