data tables couldnt work when thereis an bootstrap modal inside - datatable

Question

I have a BIG PROBLEM, my data tables coundt work when i put a Bootstrap Modal in, the Bootstrap Modal is in the tr for Edit data for Looping.
here's my table and modal within
<table id="data" class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th><center>Foto</center></th>
<th><center>Nip</center></th>
<th><center>Nama</center></th>
<th><center>Action</center></th>
</tr>
</thead>
<tbody>
<?php include( "../koneksi.php"); $no=1 ; $data_pegawai=m ysql_query( 'select * from data_pegawai'); while($data=m ysql_fetch_array($data_pegawai)){ ?>
<tr>
<td>
<?php echo $no; ?>
</td>
<td>
<?php echo $data[ 'foto']; ?>
</td>
<td>
<?php echo $data[ 'nip']; ?>
</td>
<td>
<?php echo $data[ 'nama']; ?>
</td>
<td>
<a class="btn btn-warning btn-md" data-toggle="modal" data-target="#myModalEdit<?php echo $data['id']; ?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
<a class="btn btn-danger btn-md"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
</td>
<td>
<!-- Dialog Modal Edit -->
<div class="modal fade" id="myModalEdit<?php echo $data['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $data['id']; ?>" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel<?php echo $data['id']; ?>">Edit Data</h4>
</div>
<div class="modal-body">
<form role="form" action="../master-pegawaiSimpan.php" method="post" enctype="multipart/form-data">
<div class="box-body">
<div class="form-group">
<div class="col-lg-12">
<label for="agama">Nip</label>
<input type="text" class="form-control" name="nip" placeholder="Nip" value="<?php echo $data['nip']; ?>">
<label for="agama">Nama</label>
<input type="text" class="form-control" name="nama" placeholder="Nama" value="<?php echo $data['nama']; ?>">
<br>
<label for="agama">Foto</label>
<input type="file" class="form-control" name="foto">
<br>
</div>
</div>
<div class="box-footer">
<button type="submit" value="Simpan" name="Simpan" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php $no++; } ?>
</tbody>
</table>
and i confused with the order of javascripts, did it make an effect?
So, if i delete the modal inside the table, data tables were fine

Answer 1

Your problem is a mismatch between the number of header <th> elements and the number column <td> elements. They must match exactly.
So you have two options :
Add an extra <th> element, or
Place the modal outside of the table. This is what you should do in my opinion. There is no reason what so ever for replicating the popover markup over and over, you could do something like this instead :
<a class="btn btn-warning btn-md" data-toggle="modal" data-target="#myModalEdit" edit-id="<?php echo $data['id']; ?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
remove id from the modal as well
<div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
and add a click event to populate data from the row when the modal is about to be shown:
$('a[data-toggle="modal"]').on('click', function() {
$tr = $(this).closest('tr');
$('[name="nip"]').val($tr.find('td:eq(2)'));
$('[name="nama"]').val($tr.find('td:eq(3)'));
//etc
})