datatables does not becomes responsive on bootstra

I am using datatables plugin for my table, please note that I am using responsive datatables. Also I am using bootstrap v3.2.0. I have put-up my responsive datatables on bootstrap modals dialog. But problem, I am facing is that my table is not becoming responsive on modal dialog, it becomes responsive on normal page though. I have found if i remove the class name "modal" from modal code then it becomes responsive so it is clear that class modal is creating problem but i can not remove modal class as well otherwise modal won't work.

Here is css of modal class:

.modal {
    bottom: 0;
    display: none;
    left: 0;
    outline: 0 none;
    overflow-x: auto;
    overflow-y: scroll;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1050;
}

My Modal code:

    <div class=" fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
        <h4 class="modal-title" id="myModalLabel">Send File Popup</h4>
      </div>
      <div class="modal-body">    
         <table id="filepopupTable" class="display responsive nowrap" cellspacing="0" width="100%">
                    <thead>
                 <tr>
                 <th class="padding10">  <div class="ckbox ckbox-default">
            <input type="checkbox" id="selectall" value="1" class="mt0 mr10" />
            <label for="selectall" class="mr5">Select All</label>
          </div></th>
                    <th>File Name</th>
                    <th>Size</th>
                     <th>Uploaded On</th>
                    <th data-sort-ignore="true">Quick Action</th>

                 </tr>
              </thead>
              <tbody>
                 <tr class="odd gradeX">
                  <td class="thmb">
                                    <div class="ckbox ckbox-default">
                  <input type="checkbox" id="check1" value="1" />
                  <label for="check1"></label>
                </div>
                                  </td>
                    <td>Life brochure.doc</td>
                    <td>3 kb</td>
                     <td> Jan 03, 2014</td>
                    <td class="table-action">
                   <a href="#" class="tooltips" title="Send" data-toggle="tooltip"><i class="glyphicon glyphicon-send"></i></a>
                </td>
                 </tr>
                 <tr class="even gradeC">
                  <td class="thmb">
                                   <div class="ckbox ckbox-default">
                  <input type="checkbox" id="check2" value="1" />
                  <label for="check2"></label>
                </div>
                                  </td>
                      <td>Provider_list.xlxs</td>
                    <td>34 kb</td>
                     <td> Jan 03, 2014</td>
                    <td class="table-action">
                   <a href="#" class="tooltips" title="Send" data-toggle="tooltip"><i class="glyphicon glyphicon-send"></i></a>
                </td>
                 </tr>
                 <tr class="odd gradeA">
                  <td class="thmb">
                                   <div class="ckbox ckbox-default">
                  <input type="checkbox" id="check3" value="1" />
                  <label for="check3"></label>
                </div>
                                  </td>
                    <td>My_logo.png</td>
                    <td>443 kb</td>
                     <td> Jan 03, 2014</td>
                    <td class="table-action">
                   <a href="#" class="tooltips" title="Send" data-toggle="tooltip"><i class="glyphicon glyphicon-send"></i></a>
                </td>
                 </tr>
               </tbody>

                </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
      </div>
    </div>
  </div>
</div>

Please everyone, check this issue and try to fix it.

Help is much appreciated!!

回答1:

Its not so much that the modal class is causing the issue as it is the fact that the modal class hides its contents by default.

The Responsive DataTables extension will not run on a table that is hidden during initialization.

To work around this issue after you show the modal recalculate the column widths. First the table:

var myTable = $("#myTable").DataTable({});

Then later showing when you show the modal

$("#myModal").modal('show');
myTable.responsive.recalc();

More information can be found here: http://datatables.net/extensions/responsive/reference/api/responsive.recalc%28%29

回答2:

To add to what KyleT said, make sure you wait until the modal has been shown before calculating the dimensions, this can done like so...

//once the modal has been shown
$('#yourModal').on('shown.bs.modal', function() {
               //Get the datatable which has previously been initialized
                var dataTable= $('#yourResponsiveDataTableInModal').DataTable();
                //recalculate the dimensions
                dataTable.columns.adjust().responsive.recalc();

            });

回答3:

Is this any help to you: http://codepen.io/panchroma/pen/nBmbL ?

HTML is unchanged. CSS is as above with the addition of

.modal-content{
min-width: 300px; /* adjust as necessary */
}

As you can see, I'm stopping the modal window from collapsing too small.

Good luck!

回答4:

Try adding <div class="table-responsive"></div> wrapper around your table. It worked for me (sort of). I couldn't get it to work inside a panel, but it did work a lot better with the wrapper.