Can I have an interactive datatable show up as a modal??

MicroSilicon_IoT

Hi, I have a selected datatable essentially copied from one of your examples

 <script>
    $(document).ready(function(){
        $('#myTable').dataTable( {
                            select: true,
        dom: 'frtliBp',
        buttons: [
        {
            text: 'Get selected data',
            extend: 'selected',
            action: function ( e, dt, node, config ) {
                var rows = dt.rows( { selected: true } ).count();
 
                alert( 'There are '+rows+'(s) selected in the table' );
            }        }    ]
                                  } );           });
    </script>

But I'd like this to show up as a modal when I click a button. When I do this, the table shows up correctly, but without its interactivity. Can you advise what I might be missing? Thanks, John

MicroSilicon_IoT

Oh heck, that's embarassing. I think I have confused two companies with similar names. Please ignore question.

colin

Possibly, this is DataTables, so you might be in the right place

Colin

MicroSilicon_IoT

yeh, I had muddle boostrapTable with datable. ok, the world is a happy place again now. Indeed, my original questions is answered. OK, so with this HTML below, then it declares a modal and the body of that is a Datatables.Net and everything is great. Almost. I did out dt-responsive into the data-table class.

                   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                      Select Experiment
                     </button>
                     <div class="modal fade" data-backdrop="false" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                       <div class="modal-dialog modal-lg" role="document">
                         <div class="modal-content">
                           <div class="modal-header">
                             <h5 class="modal-title" id="exampleModalLabel">Experiment Datasets</h5>
                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                             </button>
                           </div>
                           <div class="modal-body">
                             <div class = "container-fluid"> 
                                <table id = "data-table" class="cell-border dt-responsive nowrap" style="width:100%"> </table>
                             </div>
                           </div>
                           <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                              <button type="button" class="btn btn-primary">Save changes</button>
                           </div>
                         </div> <!-- end of modal content -->
                       </div>
                     </div>  <!-- end of modal -->
                  </div> <!-- end of that column -->

the data-table is defined with javascript because I'm going to need that later

      var table_data = {{well.get_transposed_table() | safe}}
      $(document).ready(function() {
      $('#data-table').DataTable({ 
      data: table_data,
      columns: [
        {title: "Name"}, 
        {title: "Creation Date"},
        {title: "Modified Date"},
        {title: "Number Rows"}, 
      ]
      });
      });

and the result is

That's almost exactly what I was looking for...

So my first question is, I guess, a CSS question:: why is the selection showing up as a bunch of triangles.... It doesnt do this if I select the datatable outside of the modal.

But much more interesting... I seem to have lost the ability to select a particular row. Also, how should I pass the result of the selection back to the javascript. E.g. so that I could have something like this when closed

MicroSilicon_IoT

Possibly pertinent, this is order that I am loading js

<script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://unpkg.com/json5@2.2.0/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" > </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js">
</script>
 
 <!-- Datatables JavaScript -->   
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>

MicroSilicon_IoT

I found hatching, which I am attempting to disable. Something like this, but it is not working yet.

 <div class="modal-body">
<div class = "container-fluid"> 
<table id = "data-table" class="cell-border nowrap" style="width: 100%; 
    table.dataTable thead .sorting {background: none}; 
    table.dataTable thead .sorting_asc {background: none};
    table.dataTable thead .sorting_asc_disabled {background: none};
    table.dataTable thead .sorting_desc {background: none};
    table.dataTable thead .sorting_desc_disabled {background: none};" >
 </table>
</div>

kthorngren

I took your modal code and copied it here:
http://live.datatables.net/piquzipi/1/edit

I used the Download Builder to generate the proper set of CSS and JS files for Bootstrap 4. Not sure what CSS files you have. I also included select and responsive.

why is the selection showing up as a bunch of triangles.

We will need to see the problem to help debug. Make sure you have all the correct Datatables CSS and JS integration files for Bootstrap 5.

I seem to have lost the ability to select a particular row

You didn't enable select, ie select: true, like you have for your original code snippet.

how should I pass the result of the selection back to the javascript

See this example of how to get the selected rows.

Note also you should use columns.adjust() to recalculate the column widths when the modal is shows, similar to this example. My test case does the same when the modal is shown. If you want responsive then you might also need to use responsive.recalc().

IF you still need help please post a link to your page or a test case replicating the issue. Feel free to update my example.

Kevin

MicroSilicon_IoT

This worked, as long as I put it after the .css

  <style>
        table.dataTable thead .sorting, 
        table.dataTable thead .sorting_asc, 
        table.dataTable thead .sorting_desc { background : none !important};
    </style>

kthorngren

You should need to do that. You have conflicting CSS:

You have two sets of sorting arrows; one for Bootstrap and one for the default Datatab;es styling. Basically that means you are loading both jquery.dataTables.min.css and dataTables.bootstrap5.min.css. You should only have dataTables.bootstrap5.min.css with Bootstrap 5. See this example. As I suggested use the Download Builder to generate the proper set of files for your environment.

Kevin

MicroSilicon_IoT

Duh, I was missing select :true

MicroSilicon_IoT

This is great feedback Kevin!!! Thanks so much.

MicroSilicon_IoT

This is all really working perfectly for me now. Datatables.net is a very nice package indeed.....

[...as for debugging when I'm using the wrong CSS and JS. Aargh, so complicated to debug... At one point I changed one tiny, tiny, thing and nothing would load on the screen at all, just a "page loading" icon. Sigh. I am never changing them again :-) ]]