如何在模态中设置数据表？

Question

这是我的代码，我试图将Jquery DataTable包含在bootstrap模式中。

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

请试试这个：

$('.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();

这是一个有效的solution

Answer 2

你可以参考这个小提琴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
});