title: how to set datatable in modal?
body: <p><img src="https://i.stack.imgur.com/eTk5C.png" alt="enter image description here"></p>
  
  <p>Here is my code,I tried to include Jquery <code>DataTable</code> in bootstrap modal.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="col-lg-12"&gt;
          &lt;div class="modal fade" style="height: 100%;" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-dialog" style="width:90%;"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                          &lt;h4 class="modal-title" id="myModalLabel"&gt;
                          &lt;div class="modal-kepala"&gt;&lt;/div&gt;&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;div class="modal-badan"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- /.modal-content --&gt;
                  &lt;/div&gt;
                  &lt;!-- /.modal-dialog --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.col-lg-12 --&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('.modal-badan').append('&lt;table class="table datatable" id="dataTables-example"&gt;'+
                                             '&lt;thead&gt;'+
                                                 '&lt;tr&gt;'+
                                                      '&lt;th&gt;ID&lt;/th&gt;'+
                                                      '&lt;th&gt;Pelapor&lt;/th&gt;'+
                                                      '&lt;th&gt;Waktu&lt;/th&gt;'+
                                                      '&lt;th&gt;Judul&lt;/th&gt;'+
                                                      '&lt;th&gt;Kategori&lt;/th&gt;'+
                                                      '&lt;th&gt;Status&lt;/th&gt;'+
                                                      '&lt;th&gt;Publish&lt;/th&gt;'+
                                                      '&lt;th&gt;Detail&lt;/th&gt;'+
                                                 '&lt;/tr&gt;'+
                                             '&lt;/thead&gt;'+
                                             '&lt;tbody&gt;'+
                                                 laporan+
                                             '&lt;/tbody&gt;&lt;/table&gt;');
                  $('#dataTables-example').DataTable();
              } else {
                  $('.modal-badan').append('&lt;table class="table table-striped table-bordered table-hover" id="dataTables-example"&gt;'+
                                            '&lt;thead&gt;'+
                                                 '&lt;tr&gt;'+
                                                      '&lt;th&gt;ID&lt;/th&gt;'+
                                                      '&lt;th&gt;Pelapor&lt;/th&gt;'+
                                                      '&lt;th&gt;Waktu&lt;/th&gt;'+
                                                      '&lt;th&gt;Judul&lt;/th&gt;'+
                                                      '&lt;th&gt;Kategori&lt;/th&gt;'+
                                                      '&lt;th&gt;Status&lt;/th&gt;'+
                                                      '&lt;th&gt;Publish&lt;/th&gt;'+
                                                      '&lt;th&gt;Detail&lt;/th&gt;'+
                                                 '&lt;/tr&gt;'+
                                             '&lt;/thead&gt;'+
                                             '&lt;tbody&gt;'+
                                             '&lt;/tbody&gt;');
  $('.modal-badan').append('&lt;/table&gt;&lt;script type="text/javascript"&gt;$("#dataTables-example").DataTable({ responsive: true });&lt;\/script&gt;');
              }
  </code></pre>