Data tables adalah sebuah plug-in untuk memanipulasi data dalam bentuk tabel HTML. Dengan adanya plugin ini memudahkan kalian untuk mebuat sebuah tabel di dalam website kalian.

Dalam data tables memungkinkan kita untuk membuat tabel yang responsive, ada fitur pencarian, fitur filter berapa banyak data yang ingin di tampilkan.

Baca Juga : Tutorial Membuat Auto Fill Dengan Perintah Select Dengan PHP

Cara membuat tabel dengan datatables sangat memungkinkan kita membuat tampilan web yang kita buat menjadi menarik dan memudahkan melihat data dalam tabel dengan fitur fitunya.

Bagaimana cara menggunakannya mari kita bahas disini.

1. Buka website datatables

Teman-teman masuk kedalam website datatables berikut https://datatables.net/examples/basic_init/zero_configuration.html

Didalam datatables ini kalian akan diminta untuk menggunakan jquery dan css yang sudah disiapkan oleh penyedia plugin tersebut.

datatables tutorial

Teman teman melihat ini kan maka ini menjadi perhatian teman-teman tulisan https://code.jquery.com/jquery-3.5.1.js dan https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js

Harus kalian lamirkan di dalam head kalian, agar tabel kalian dapan berjalan dengan baik.

2. Buat file baru index.php untuk data tables

Setelah itu kita buka text editor untuk membuat tabel nya. dan masukkan script berikut, ikuti jangan sampai ada yang tertinggal yah,

perharikan pada head disana kita menggunakan bootstrap kalian bisa pakai atau tidak yah, terserah kalian saja gaiss…

Baca juga : 5 Jurusan Kuliah yang banyak Dibutuhkan Tahun 2021 Mendatang!

head

JQuery data tables

Body data tables

Itu merupakan langkah-langkah untuk membuat datatables nya kalian bisa mencobanya di rumah dengan sesuai dengan langkah-langkah yang sudah ada di dalam tutorial diatas. disana terdapat di satu file terdiri dari head, body dan jquery.

pada head difungsikan untuk menentukan meta website, favicon, title website, link eksternal css dan jquery kalian dan pada bagian jquery sangat penting untuk menjalankan fitur search dan filter

Code Full mem buat data tables

Data Tables
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
NamePositionOfficeAgeStart dateSalary

kalian bisa mencobanya disini gaiss terimakasih yahh sudah meliahat blog ini kalian bisa mencoba sendiri dirumah

Baca Juga : Apa itu website ? pengertian dan jenis-jenis website.

Semoga kalian bisa menjalankannya, jika memang terdapat error kalian bisa buat di kolom komentar yah nanti akan saya bantu,

terimakasih telah membaca blog cara membuat tabel php dengan datatables


0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *