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

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

MicroSilicon_IoTMicroSilicon_IoT Posts: 9Questions: 1Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • MicroSilicon_IoTMicroSilicon_IoT Posts: 9Questions: 1Answers: 0

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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

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

    Colin

  • MicroSilicon_IoTMicroSilicon_IoT Posts: 9Questions: 1Answers: 0

    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_IoTMicroSilicon_IoT Posts: 9Questions: 1Answers: 0

    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_IoTMicroSilicon_IoT Posts: 9Questions: 1Answers: 0

    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>
    
  • kthorngrenkthorngren Posts: 21,315Questions: 26Answers: 4,948

    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_IoTMicroSilicon_IoT Posts: 9Questions: 1Answers: 0

    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>
    
  • kthorngrenkthorngren Posts: 21,315Questions: 26Answers: 4,948
    Answer ✓

    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_IoTMicroSilicon_IoT Posts: 9Questions: 1Answers: 0

    Duh, I was missing select :true

  • MicroSilicon_IoTMicroSilicon_IoT Posts: 9Questions: 1Answers: 0

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

  • MicroSilicon_IoTMicroSilicon_IoT Posts: 9Questions: 1Answers: 0

    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 :-) ]]

Sign In or Register to comment.