Wie setze ich Datatable in modal?

Question

Hier ist mein Code, habe ich versucht, JQuery DataTable in Bootstrap-modal aufzunehmen.

HTML

<div class="col-lg-12"> 
     <div class="modal fade" style="height: 100%;" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog" style="width:90%;"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
         <h4 class="modal-title" id="myModalLabel"> 
         <div class="modal-kepala"></div></h4> 
        </div> 
        <div class="modal-body"> 
         <div class="modal-badan"></div> 
        </div> 
        <!-- /.modal-content --> 
       </div> 
       <!-- /.modal-dialog --> 
      </div> 
     </div> 
     <!-- /.col-lg-12 --> 
    </div> 

JS

$('.modal-badan').append('<table class="table datatable" id="dataTables-example">'+ 
              '<thead>'+ 
               '<tr>'+ 
                '<th>ID</th>'+ 
                '<th>Pelapor</th>'+ 
                '<th>Waktu</th>'+ 
                '<th>Judul</th>'+ 
                '<th>Kategori</th>'+ 
                '<th>Status</th>'+ 
                '<th>Publish</th>'+ 
                '<th>Detail</th>'+ 
               '</tr>'+ 
              '</thead>'+ 
              '<tbody>'+ 
               laporan+ 
              '</tbody></table>'); 
       $('#dataTables-example').DataTable(); 
      } else { 
       $('.modal-badan').append('<table class="table table-striped table-bordered table-hover" id="dataTables-example">'+ 
              '<thead>'+ 
               '<tr>'+ 
                '<th>ID</th>'+ 
                '<th>Pelapor</th>'+ 
                '<th>Waktu</th>'+ 
                '<th>Judul</th>'+ 
                '<th>Kategori</th>'+ 
                '<th>Status</th>'+ 
                '<th>Publish</th>'+ 
                '<th>Detail</th>'+ 
               '</tr>'+ 
              '</thead>'+ 
              '<tbody>'+ 
              '</tbody>'); 
$('.modal-badan').append('</table><script type="text/javascript">$("#dataTables-example").DataTable({ responsive: true });<\/script>'); 
      } 

Answer 1

Bitte versuchen Sie dies:

$('.modal-body').append('<table class="table datatable" id="dataTables-example">'+ 
'<thead>'+ 
    '<tr>'+ 
     '<th>ID</th>'+ 
     '<th>Pelapor</th>'+ 
     '<th>Waktu</th>'+ 
     '<th>Judul</th>'+ 
     '<th>Kategori</th>'+ 
     '<th>Status</th>'+ 
     '<th>Publish</th>'+ 
     '<th>Detail</th>'+ 
    '</tr>'+ 
'</thead>'+ 
'<tbody>'+ 
    laporan+ 
'</tbody>'); 

$('#dataTables-example').DataTable(); 

Hier ist ein funktionierendes solution

Answer 2

Sie können diese Geige verweisen DataTable in modal

var html = ""; 
html += '<table id="tblData" class="table table-bordered table-striped">'; 
html += '<thead>'; 
html += '<tr>'; 
html += '<th class="th">ID.</th>'; 
html += ' <th class="th">Pelapor</th>'; 
html += '<th class="th">Waktu</th>'; 
html += ' <th class="th">Judul</th>'; 
html += '<th class="th">Kategori</th>'; 
html += '<th class="th">Status</th>'; 
html += '<th>Publish</th>'; 
html += '<th>Detail</th>'; 
html += '</tr>'; 
html += '</thead>'; 
html += ' <tbody>'; 

$("#dTable").append(html); 
$('#tblData').dataTable({ 
    "bPaginate": true, 
    "bLengthChange": true, 
    "bFilter": true, 
    "bSort": false, 
    "bInfo": true, 
    "bAutoWidth": true 
});