Selamat Pagi gaiss,,,
Tentu kalian pernah melihat diberbagai website yang menggunakan tabel yang responsive, kalian penasaran bagaimana untuk membuatnya. Disini gw mau sharing ilmu lagi gaiss,, cara untuk membuat tabel yang bagus bisa search menampilkan 10 row data, 25 row data sampe 100 pokoknya responsive banget dahh hehehe
Methode membuat tabel responsive dengan datatables ini dapat kalian lihat di Webnya https://datatables.net/ nah kalian bisa buka linknya oke langsung aja disini kalian juga harus siapin folder yang untuk membuat tabel ini.
Baca juga : Hostingan termurah sejagat raya gaiss
Kunjungi web ini maka kamu akan LINK
Untuk Css dan Jquery nya kita pake bawaan dari datatblesnya yah. jadi semua dengan online
1. Buat Index.php
Mengapa menggunakan PHP karena jika menggunakan HTML Jquery kalian tidak akan bisa jalan, kalian bisa coba sendiri yah gais. Berikut kalian contoh script dibawah ini.
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <Link Rel="Stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"> <title>Membuat data tables</title> </head>Diatas merupakan bagian pertama headnya diamana disana kalian akan menentukan css dan tempat pemanggilan CSS kalian.Tampilan dan style website kalian bisa ditentukan dari sana gais.2. Buat Body
Oke sekarang kita buatkan untuk body yah gaiss nahh disini kalian harus perhatian pemanggilanm ID nya yahh gais Id apa yang kalian buat pada jquery kalian.nahh disini kita perhatikan yahh gais.<body> <div class="container"> <Body> <center> <h1>Membuat Data Tables</h1> </center> <Table Id="example" Class="display" Style="Width:100%"> <Thead>Nah disini kalian bisa liat pada script table id="exemple" Inilah yang menentukan nanti table kalian dapat berjalan dengan bagus atau tidak hehe.kita berlanjut...3. Buat Jquery
Disini kalian membuat jquery untuk membuat tampilan kalian seperti gambar dibawah ini gaisss.okee langsung saja perhatikan untuk script dibawah ini;<Script Src="https://code.jquery.com/jquery-3.5.1.js"></Script> <Script Src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></Script> <Script> $(document).ready(function() { $('#example').DataTable(); } ); </Script>ini gais kalian harus membuat ini juga agar tabel kalian dapat berfungsi sebagaimana fungsinya gaiss, gimana apa kalian mendapat kesulitan dalam membuatnya.?? nahh jadi nya seperti ini gaisss.Baca juga : Cara Mudah Menampilkan Data dari Database dengan PHPGw lampirin juga nih gais untuk full scriptnya.<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <Link Rel="Stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"> <title>Membuat data tables</title> </head> <body> <div class="container"> <Body> <center> <h1>Membuat Data Tables</h1> </center> <Table Id="example" Class="display" 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> <Tr> <Td>Brielle Williamson</Td> <Td>Integration Specialist</Td> <Td>New York</Td> <Td>61</Td> <Td>2012/12/02</Td> <Td>$372,000</Td> </Tr> <Tr> <Td>Herrod Chandler</Td> <Td>Sales Assistant</Td> <Td>San Francisco</Td> <Td>59</Td> <Td>2012/08/06</Td> <Td>$137,500</Td> </Tr> <Tr> <Td>Rhona Davidson</Td> <Td>Integration Specialist</Td> <Td>Tokyo</Td> <Td>55</Td> <Td>2010/10/14</Td> <Td>$327,900</Td> </Tr> <Tr> <Td>Colleen Hurst</Td> <Td>Javascript Developer</Td> <Td>San Francisco</Td> <Td>39</Td> <Td>2009/09/15</Td> <Td>$205,500</Td> </Tr> <Tr> <Td>Sonya Frost</Td> <Td>Software Engineer</Td> <Td>Edinburgh</Td> <Td>23</Td> <Td>2008/12/13</Td> <Td>$103,600</Td> </Tr> <Tr> <Td>Jena Gaines</Td> <Td>Office Manager</Td> <Td>London</Td> <Td>30</Td> <Td>2008/12/19</Td> <Td>$90,560</Td> </Tr> <Tr> <Td>Quinn Flynn</Td> <Td>Support Lead</Td> <Td>Edinburgh</Td> <Td>22</Td> <Td>2013/03/03</Td> <Td>$342,000</Td> </Tr> <Tr> <Td>Charde Marshall</Td> <Td>Regional Director</Td> <Td>San Francisco</Td> <Td>36</Td> <Td>2008/10/16</Td> <Td>$470,600</Td> </Tr> <Tr> <Td>Haley Kennedy</Td> <Td>Senior Marketing Designer</Td> <Td>London</Td> <Td>43</Td> <Td>2012/12/18</Td> <Td>$313,500</Td> </Tr> <Tr> <Td>Tatyana Fitzpatrick</Td> <Td>Regional Director</Td> <Td>London</Td> <Td>19</Td> <Td>2010/03/17</Td> <Td>$385,750</Td> </Tr> <Tr> <Td>Michael Silva</Td> <Td>Marketing Designer</Td> <Td>London</Td> <Td>66</Td> <Td>2012/11/27</Td> <Td>$198,500</Td> </Tr> <Tr> <Td>Paul Byrd</Td> <Td>Chief Financial Officer (CFO)</Td> <Td>New York</Td> <Td>64</Td> <Td>2010/06/09</Td> <Td>$725,000</Td> </Tr> <Tr> <Td>Gloria Little</Td> <Td>Systems Administrator</Td> <Td>New York</Td> <Td>59</Td> <Td>2009/04/10</Td> <Td>$237,500</Td> </Tr> <Tr> <Td>Bradley Greer</Td> <Td>Software Engineer</Td> <Td>London</Td> <Td>41</Td> <Td>2012/10/13</Td> <Td>$132,000</Td> </Tr> <Tr> <Td>Dai Rios</Td> <Td>Personnel Lead</Td> <Td>Edinburgh</Td> <Td>35</Td> <Td>2012/09/26</Td> <Td>$217,500</Td> </Tr> <Tr> <Td>Jenette Caldwell</Td> <Td>Development Lead</Td> <Td>New York</Td> <Td>30</Td> <Td>2011/09/03</Td> <Td>$345,000</Td> </Tr> <Tr> <Td>Yuri Berry</Td> <Td>Chief Marketing Officer (CMO)</Td> <Td>New York</Td> <Td>40</Td> <Td>2009/06/25</Td> <Td>$675,000</Td> </Tr> </Tbody> <Tfoot> <Tr> <Th>Name</Th> <Th>Position</Th> <Th>Office</Th> <Th>Age</Th> <Th>Start Date</Th> <Th>Salary</Th> </Tr> </Tfoot> </Table> </Body> <Script Src="https://code.jquery.com/jquery-3.5.1.js"></Script> <Script Src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></Script> <Script> $(document).ready(function() { $('#example').DataTable(); } ); </Script> </html>Gimana cukup mudahkan kalian bisa tulis koment jika ada yang mengalami kesulitan untuk semuanya yahh gaiss.Butuh Hosting murah bisa ke klik link berikut gaiss Hostingmurah
sekian tutorial dari gw gais semoga ilmunya bermanfaat....
Terimakasih
Posting Komentar