Cara menggunakan datatables bootstrap

Demo | Download

Dilema ketika kita menggunakan sebuah datatables adalah ketika website kita dalam mode mobile dimana datatables yang kita punya, tidak akan mengikut kecil atau responsive itu membuat tidak bagus bukan, maka dari itu disini saya akan membagikan bagaimana cara membuat dataTables responsive. simak terus ya teman-teman.

Jika teman-teman ada yang belum tau apa itu datatables disini saya akan berikan penjelasan singkat ya, dataTables digunakan untuk kita menampilkan sebuah data dimana dengan menggunakan dataTables data yang di tampilkan itu mempunyai tampilan yang rapi dimana ada sebuah pagination untuk menanggulangi jika data banyak, ada search untuk mencari data, dan ada tombol untuk mengurutkan abjadnya, oke langsung saja cara membuat dataTables responsive, caranya langsung saja kita gunakan saja CDN silahkan teman-teman pasang CDNnya yang saya berikan di bawah ini:

1

2

3

4

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css">

di atas untuk CSSnya ya dan selanjutnya untuk Javascriptnya

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>

<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>

<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>

<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        var table = $('#example').DataTable( {

            responsive: true

        } );

        new $.fn.dataTable.FixedHeader( table );

    });

</script>

dan untuk di atas adalah untuk jsnya itulah yang kita butuhkan, jika sudah kita tinggal memasukan data ke tablesnya, oke langsung saja.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

<table id="example" class="display nowrap table-striped table-bordered table" style="width:100%">

<thead>

     <tr>

         <th>Name</th>

         <th>Position</th>

         <th>Office</th>

         <th>Age</th>

         <th>Start date</th>

         <th>Salary</th>

     </tr>

</thead>

<tbody>

     <tr>

         <td>Tiger Nixon</td>

         <td>System Architect</td>

         <td>Edinburgh</td>

         <td>61</td>

         <td>2011/04/25</td>

         <td>$320,800</td>

     </tr>

     <tr>

         <td>Garrett Winters</td>

         <td>Accountant</td>

         <td>Tokyo</td>

         <td>63</td>

         <td>2011/07/25</td>

         <td>$170,750</td>

     </tr>

     <tr>

         <td>Ashton Cox</td>

         <td>Junior Technical Author</td>

         <td>San Francisco</td>

         <td>66</td>

         <td>2009/01/12</td>

         <td>$86,000</td>

     </tr>

     <tr>

         <td>Cedric Kelly</td>

         <td>Senior Javascript Developer</td>

         <td>Edinburgh</td>

         <td>22</td>

         <td>2012/03/29</td>

         <td>$433,060</td>

     </tr>

     <tr>

         <td>Airi Satou</td>

         <td>Accountant</td>

         <td>Tokyo</td>

         <td>33</td>

         <td>2008/11/28</td>

         <td>$162,700</td>

     </tr>

</body>

</table>

Ini saya contohkan data sedikit saja ya, dan sekarang kita lihat hasilnya.

Bisa dilihat ketika tampilan saya kecilkan atau mode mobile maka datatables pun akan ikut mengecil, bukan hanya kecil tapi ada sebuah icon dimana tombol itu ketika kita tekan akan muncul sebuah data yang tadi tampil, seperti itu kurang lebihnya teman-teman, simple bukan, oke saya rasa cukup sampai disini belajar kita tentang cara membuat dataTables responsive, semoga bermanfaat dan sampai jumpa pada artikle selanjutnya terimakasih.