Dalam posting ini saya akan menunjukkan Cara untuk mengambil data JSON dari file dan tampilan di JQuery Datatables. Format data JSON adalah format data yang sangat ringan untuk menyimpan data. Apakah Anda tahu apa itu JQuery Datatables, ini adalah plugin JQuery untuk menampilkan data dalam format Tabel.
Dengan menggunakan plugin JQuery ini Anda tidak hanya bisa menampilkan data dalam tabel juga tapi juga menyediakan fetures lain seperti data pencarian dari data html, Anda dapat mengontrol berapa banyak record yang ingin Anda tampilkan pada satu halaman, namun juga menyediakan fitur seperti data tampilan dalam ascending. atau urutan menurun dan juga menyediakan pagination. Caranya sangat simple silakan anda ikuti langkah2 dibawah ini :
Baca juga : Cara membuat Shoping Cart PHP Mysql
Buat file index.php script kode :<!DOCTYPE html> <html> <head> <title>Show JSON Data in Jquery Datatables</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script> </head> <body> <br /><br /> <div class="container"> <h1 align="center">Show JSON Data in Jquery Datatables</h3><br /> <h3 align="center">Employee Database</h3><br /> <table id="data-table" class="table table-bordered"> <thead> <tr> <th>Name</th> <th>Gender</th> <th>Designation</th> </tr> </thead> </table> </div> <!-- script --> <script> $(document).ready(function(){ $('#data-table').DataTable({ "ajax" : "employee_data.json", "columns" : [ { "data" : "name" }, { "data" : "gender"}, { "data" : "designation"} ] }); }); </script> </body> </html>
{
"data" : [
{
"name": "Michael Bruce",
"gender": "Male",
"designation": "System Architect"
},
{
"name": "Jennifer Winters",
"gender": "Female",
"designation": "Senior Programmer"
},
{
"name": "Donna Fox",
"gender": "Female",
"designation": "Office Manager"
},
{
"name": "Cynthia E. Folmar",
"gender": "Female",
"designation": "Pharmacy technician"
},
{
"name": "Charles E. Drexler",
"gender": "Male",
"designation": "Pamphlet binding worker"
},
{
"name": "Andre F. Morris",
"gender": "Male",
"designation": "Respiratory therapy technician"
},
{
"name": "James P. Baumgartner",
"gender": "Male",
"designation": "Diesel mechanic"
},
{
"name": "Harold E. Welter",
"gender": "Male",
"designation": "Cooling and freezing equipment operator"
},
{
"name": "Antionette J. Ellard",
"gender": "Female",
"designation": "Power plant distributor"
},
{
"name": "Edith C. Hughes",
"gender": "Female",
"designation": "Record clerk"
},
{
"name": "Mary R. Johnson",
"gender": "Female",
"designation": "Direct care worker"
},
{
"name": "Christina R. Belin",
"gender": "Female",
"designation": "Cost engineer"
},
{
"name": "Edith J. Ochoa",
"gender": "Female",
"designation": "Gastroenterologist"
},
{
"name": "Elizbeth R. Thornton",
"gender": "Female",
"designation": "Public relations consultant"
},
{
"name": "Barbara W. Ibarra",
"gender": "Female",
"designation": "Regional geographer"
},
{
"name": "Art D. Steiner",
"gender": "Male",
"designation": "Camp director"
},
{
"name": "Dorothy C. Downs",
"gender": "Female",
"designation": "Conference interpreter"
},
{
"name": "Francisca J. Healy",
"gender": "Female",
"designation": "Stereotyper"
},
{
"name": "Janice J. Luton",
"gender": "Female",
"designation": "Quality control technician"
},
{
"name": "Jeanetta M. Brown",
"gender": "Female",
"designation": "Machine feeder"
},
{
"name": "Susan P. Nazario",
"gender": "Female",
"designation": "Process metallurgical engineer"
},
{
"name": "Antonia K. Vogl",
"gender": "Female",
"designation": "Psychiatrist"
},
{
"name": "Cheryl P. Mahn",
"gender": "Female",
"designation": "Credit manager"
},
{
"name": "Stephen E. Lynn",
"gender": "Male",
"designation": "Golf course architect"
},
{
"name": "Michael M. Rodriguez",
"gender": "Male",
"designation": "Psychologist"
},
{
"name": "Elsie D. Jones",
"gender": "Female",
"designation": "Research psychologist"
},
{
"name": "Jeremy J. Underwood",
"gender": "Male",
"designation": "Commentator"
},
{
"name": "Brenda J. Fowler",
"gender": "Female",
"designation": "Radio equipment installer"
},
{
"name": "Mollie S. Castillo",
"gender": "Female",
"designation": "Information processing worker"
},
{
"name": "Carol T. McDill",
"gender": "Female",
"designation": "Power distributor"
},
{
"name": "Darlene P. Allen",
"gender": "Female",
"designation": "Industrial production manager"
}
]
} Baca juga : Ajax add & delete a Record with jQuery dan Load More Ajax Jquery
Posting Komentar
Posting Komentar