Jquery ile Datatable Plugini Nasıl Kullanılır?
Merhaba, Bu makalede çok sık kullanılan datatable pluginini, projemizde nasıl kullanabiliriz onu inceleyeceğiz
Öncelikle datatable plugunini kullanabilmek için aşağıdaki jquery, bootstrap, ve datatable cdnlerini projemize ekleyelim.
1 2 3 4 5 6 7 8 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script> |
İsterseniz bu cdnleri indirip local olarak da kullanabilirsiniz.
Cdnlerimiz hazır şimdi datatable pluginin çalışabilmesi için tablo yapımız aşağıdaki gibi olmalıdır <thead> ve <tbody> tagleri ve <table> elementinin classında mutlaka table olmalı.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<table id="example" class="table table-striped table-bordered"> <thead> <tr> <th>Ad</th> <th>Soyad</th> <th>Yas</th> </tr> </thead> <tbody> <tr> <td>Ahmet</td> <td>Yılmaz</td> <td>23</td> </tr> <tr> <td>Mehmet</td> <td>Öztürk</td> <td>24</td> </tr> </tbody> </table> |
Datatable ilgili cdn’lerimiz ve tablomuz hazır, şimdi ise jquery ile datatable plugunini aktif edelim, aşağıda yazılan kodu projenize eklediğinizde datatable sorunsuz çalışacaktır.
1 2 3 4 5 |
<script> $(document).ready(function () { $('#example').DataTable(); }); </script> |
Örnek bir görünümü de aşağıdaki gibidir.
Lütfen görüş ve yorumlarınızı belirtmeyi unutmayın
