Cara menggunakan cdn datatables bootstrap 5

Question

Di tutorial kali ini admin akan menjelaskan Cara Membuat Datatables dengan Bootstrap, dengan menggunakan datatables bootstrap ini akan memudahkan kita untuk menampilkan data,,, kenapa... ? Karena di datatables sudah terdapat paging otomatis, pencarian otomatis, sort otomatis,, nah banyak banget kan..? coba bayangkan kalo kita menampilkan data yang ada di database dengan table biasa,,,fitur-fitur tersebut tidak ada,, dan kita harus membuat manual.. Capek deh.. haha..

Table of Contents Show

Cara Membuat Tabel Bootstrap dengan Datatables

Berikut ini contoh datatables... bisa dilihat pada gambar dibawah ini..

Cara Membuat Tabel Bootstrap dengan Datatables

Sudah lihat bentuk datatables.. ? saya yakin anda seorang programer pasti sangat membutuhkan ini.. dan pasti tertarik untuk membuatnya.. jika tidak..? mungkin anda sudah tau tentang hal ini,, jika tidak juga?? berarti anda programer ketinggalan zaman... heee.. becanda doank..

Ok.. Mari kita belajar membuat tabel dengan Datatables di Bootstrap :

Bootstrap

Pertama download terlebih dahulu bootstrap dari website resminya di sini : DOWNLOAD

Kemudian extrak folder CSS, Font, dan Js ke dalam folder Data_tables

Sekarang download style data table boostrap di sini : DOWNLOAD ( CTRL + S )

Simpan di dalam folder Css

Download javascript data table bootsrtap di sini : DOWNLOAD ( CTRL + S )

Simpan dalam folder Js

*Notes
Versi bootsrap yang di gunakan pada artikel ini adalah bootsrap versi 3

Jquery

Untuk jquery download terlebih dahulu di situs resminya di sini : DOWNLOAD
Letakan dalam folder Js

Sekarang untuk data tablesnya download di sini : DOWNLOAD ( CTRL + S )
Letakan dalam folder Js

Note :

Jika anda Kesulitan untuk mendownload nya, anda bisa menggunakan script dibawah ini, (letakkan di antara tag <head> paste disini </head> , dan dengan catatan komputer anda harus terkoneksi internet

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>

Code HTML

Untuk Membuat datatables dengan bootstrap anda bisa copas script dibawah ini , Sekarang untuk markupnya buatlah sebuah file HTML baru dengan nama index.php di dalam folder Data_tables dengan isi script :

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

di atas untuk CSSnya ya dan selanjutnya untuk Javascriptnya

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$(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

<thead>

<tr>

<th>Position</th>

<th>Office</th>

<th>Start date</th>

<th>Salary</th>

</tr>

</thead>

<tbody>

<tr>

<td>Tiger Nixon</td>

<td>System Architect</td>

<td>Edinburgh</td>

</tr>

<tr>

<td>Garrett Winters</td>

<td>Accountant</td>

<td>Tokyo</td>

</tr>

<tr>

<td>Ashton Cox</td>

<td>Junior Technical Author</td>

<td>San Francisco</td>

</tr>

<tr>

<td>Cedric Kelly</td>

<td>Senior Javascript Developer</td>

<td>Edinburgh</td>

</tr>

<tr>

<td>Airi Satou</td>

<td>Accountant</td>

<td>Tokyo</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.

kode bootstrap