All geek questions in one place

Datatables does not respond to modal dialog bootstrap3

I am using the datatables plugin for my table, please note that I am using flexible data. I also use bootstrap v3.2.0. I put my responsive data in the bootstrap modals dialog box. But the problem that I encountered is that my table does not respond to the modal dialog, but it becomes responsive on a regular page. I found that if I remove the class name “modal” from the modal code, then it becomes responsive, so it is clear that the modal class creates a problem, but I cannot delete the modal class, otherwise the modal will not work.

Here is the css 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 problem and try to fix it.

Help is much appreciated!

+4
5

, , , .

Responsive DataTables , .

. :

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

,

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

: http://datatables.net/extensions/responsive/reference/api/responsive.recalc%28%29

+6

, KyleT, , , , ...

//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();

            });
+2

: http://codepen.io/panchroma/pen/nBmbL?

HTML . CSS

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

, .

!

+1

<div class="table-responsive"></div> . (). , .

0

<html>
<head>
<!--Modal Goes First  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link  rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
 <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<!--Modal End -->
<!-- DataTable -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>DataTables example - Bootstrap 3</title>
	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
	<style type="text/css" class="init"></style>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
	<!-- DataTable End -->
<script type="text/javascript" class="init">
var $j = jQuery.noConflict();
$j(document).ready(function (){
    $j('#example').DataTable();
});
$(document).ready(function(){
});
</script>
</head>
<body>
<a data-toggle="modal" href="#myModal" class="btn btn-success btn-lg" data-target="#myModal">My Modal</a>
<div class="modal fade" 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>       
      </div>
      <div class="modal-body">    
	    	<table id="example" class="table table-striped table-bordered" style="width:100%"></body>
 <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>              
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>               
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>                
            </tr>          
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>                
            </tr>
                 <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>                
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>                
            </tr>        
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>               
            </tr>
            <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010/03/11</td>                
            </tr>
            <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2011/08/14</td>               
            </tr>                        
            <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010/01/04</td>                
            </tr>
            <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012/06/01</td>                
            </tr>
            <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013/02/01</td>                
            </tr>
            <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2011/12/06</td>                
            </tr>
            </tbody>
        <tfoot>
        </tfoot>
    </table>
	      
      </div>
      <div class="modal-footer">
        <a href="#" data-dismiss="modal" class="btn btn-default">Close</a>		
        <button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>
Hide result

/* , datatable (// ) , : */

0

Source: https://habr.com/ru/post/1528086/

More articles:


All Articles