Postingan lainnya

Datatable tidak berfungsi (case closed)

CASE CLOSED kelebihan <tr> wkwk

saya bikin table dan ingin mengaplikasikan bootstrap datatable kok tidak berfungsi ya table id juga udah saya coba sesuaikan sama script tetep ga ngaruh

headernya

<link rel="stylesheet" type="text/css" href="<?= base_url() ?>assets/bootstrap/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="<?= base_url() ?>assets/bootstrap/css/dataTables.bootstrap.css">
  <link rel="stylesheet" href="<? base_url() ?>assets/bootstrap/DataTables/datatables.min.css">
  <script src="<?= base_url() ?>assets/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
  <!-- SlimScroll -->
  <script src="<?= base_url() ?>assets/AdminLTE/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
  <!-- FastClick -->
  <script src="<?= base_url() ?>assets/AdminLTE/bower_components/fastclick/lib/fastclick.js"></script>

  <!-- dataTables -->
  <script src="<?= base_url() ?>assets/bootstrap/js/script.js"></script>
  <script src="<?= base_url() ?>assets/bootstrap/js/jquery.min.js"></script>
  <script type="text/javascript" src="<?= base_url() ?>assets/bootstrap/js/jquery.js"></script>
  <script type="text/javascript" src="<?= base_url() ?>assets/bootstrap/js/jquery.dataTables.js"></script>

isinya

<div class="content-wrapper">
<div class="panel-body">
<!-- <h1>Tabel Buku</h1> -->
<div class="table-responsive">
<!-- /.box-header -->
<div class="box-body">
<table id="example" class="table table-striped table-bordered data display nowrap" style="width:100%">
<thead class="thead-dark">
<tr>
<th scope="col">no</th>
<th scope="col">Judul</th>
<th scope="col">Pengarang</th>
<th scope="col">Penerbit</th>
<th scope="col">ISBN</th>
<th scope="col">Jumlah Buku</th>
</tr>
</thead>
<tbody>
<?php $no =1; ?>
<?php foreach ($buku as $data):?>
<tr id="data_<=$data['id']?>">
<tr>
<td><?=$no++?></td>
<td><?=$data['judul']?></td>
<td><?=$data['pengarang']?></td>
<td><?=$data['penerbit']?></td>

<td><?=$data['isbn']?></td>

<td><?=$data['jumlah_buku']?></td>

<input type="hidden" value="<=$data['id']?>">
</tr>
<?php endforeach ?>

</tbody>
</table>
</div>
</div>
</div>
</div>

footer

  <script>
    $(document).ready(function(){
      $('.data').DataTable();
    });
  </script>

  <!-- Bootstrap core JavaScript -->
  <!-- <script src="<?=base_url();?>assets2/vendor/jquery/jquery.min.js"></script> -->
  <script src="<?=base_url();?>assets2/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Plugin JavaScript -->
  <script src="<?=base_url();?>assets2/vendor/jquery-easing/jquery.easing.min.js"></script> -->
  <!-- <script src="<?=base_url();?>assets2/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

  <!-- Custom scripts for this template -->
  <script src="<?=base_url();?>assets2/js/creative.min.js"></script>

php codeigniter

@h1rum421

6 Kontribusi 0 Poin

Diperbarui 5 tahun yang lalu

3 Jawaban:

Berikut ini contoh menggunakan datatables dengan CI. saya memakai library jquery dan datatables dari CDN jadi untuk menjalankan skrip ini perlu koneksi internet. jika ingin offline maka library tsb perlu didownload terlebih dulu.

<pre> <html> <head> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.css"> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.js"></script> </head> <body> <div class="content-wrapper"> <div class="panel-body">  <div class="table-responsive">  <div class="box-body"> <table id="example" class="table table-striped table-bordered data display nowrap" style="width:100%"> <thead class="thead-dark"> <tr> <th scope="col">no</th> <th scope="col">Judul</th> </tr> </thead> <tbody> <tr><td>1</td><td>satu</td></tr> <tr><td>2</td><td>dua</td></tr> <tr><td>3</td><td>tiga</td></tr> </tbody> </table> </div> </div> </div> </div> <script> $(document).ready(function(){ $('.data').DataTable(); }); </script> </body> </html> </pre>

@24361

17 Kontribusi 9 Poin

Dipost 5 tahun yang lalu

Tanggapan

saya udah donwload librarynya nyoba pake cdn juga ga ngaruh

@h1rum421

coba pada table id nya di ganti dan di sesuaikan dengan js id datatable

kemudian sesuaikan js nya <script> $(document).ready(function(){ $('.example').DataTable(); }); </script> </pre>

atau buat seperti ini

kalau tidak bisa juga coba menggunakan cdn datatable. </pre>

@Ridhoa

129 Kontribusi 33 Poin

Dipost 5 tahun yang lalu

Tanggapan

udah saya coba gonta ganti id table dan sesuaiin dengan js id datatablenya tetep ga ngaruh. nyoba pake cdn juga sama

@h1rum421

itu sudah ada yg jawab apa sudah di coba? jika belum di coba saja dan sedikit diperbaiki kodingan diphp nya. mulai dari <pre> <td><?=$no++?></td> <td><?=$data['judul']?></td> <td><?=$data['pengarang']?></td> <td><?=$data['penerbit']?></td>

<td><?=$data['jumlah_buku']?></td> </pre> itu semua tidak pakai titik koma. dan di <pre> <tr id="data_<=$data['id']?>"> </pre> itu kurang "?" sseharusnya <?= dan juga <table id="example" itu disamakan dengan js nya yg berada difooter

<pre> <script> $(document).ready(function(){ $('.data').DataTable(); // data seharusnya diisi dengan example }); </script> </pre>

@fitridewi

26 Kontribusi 3 Poin

Dipost 5 tahun yang lalu

Tanggapan

terima kasih atas koreksinya. untuk table id udah saya coba samain juga tidak ada perubahan

@h1rum421

$('.data').DataTable(); itu .data nya diganti jadi #data mas sesuaikan sama id nya jangan lupa. pokonya untuk class pakai "." untuk di js nya dan id menggunakan # yg saya tuliskan diatas masih salah hehe

@fitridewi

sepertinya permasalahannya ada di cara saya memanggil table dari database, soalnya pas saya ubah dengan table yang datanya tidak diambil dari database, langsung berfungsi. kira2 bagaimana ya?

@h1rum421

eh, case closed. kelebihan tag <tr> hahaha. thanks

@h1rum421