Halo teman teman dumenity, kembali lagi di tutorial tutorial pemrogramman web Dumet School, kali ini kita akan belajar salah satu package Javascript yang bernama sortablejs, sortablejs ini adalah pustaka JavaScript untuk drag dan drop Data yang dapat disetel ulang pada peramban modern dan perangkat sentuh atau touchscreen. Sortable ini tidak menggunakan jQuery. Package ini mendukung berbagai framework Javascript seperti Meteor, AngularJS, React, Polymer, Knockout, Vue dan semua framework CSS, misalnya Bootstrap. Yuk langsung saja kita praktekan Tutorial Sortable table dengan SortableJS teman teman.
sebelumnya kita buat folder dan buat file index.html.
dan ketikan struktur html berikut.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> SortableJS </title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> </head> <body> <div class="container"> <div class="row"> <h1 class="text-center mb-2">Sortablejs</h1> <div class="col-12"> <table class="table table-bordered table-hover table-Primary"> <thead> <tr> <th scope="col">Nama</th> <th scope="col">Alamat</th> <th scope="col">Email</th> </tr> </thead> <tbody id="items"> <tr> <td>Risman Hakim</td> <td>Bogor</td> <td>Risman@mail.com</td> </tr> <tr> <td>Eky Zulianto Arif</td> <td>Serang</td> <td>Eky@mail.com</td> </tr> <tr> <td>Reza Syahputra</td> <td>Depok</td> <td>Syahputra@mail.com</td> </tr> </tbody> </table> </table> </div> </div> </div> </body> </html>
yang hasilnya seperti di bawah ini.
setelah itu teman teman bisa ke terminal atau command promptnya, jangan lupa arah kan ke root folder teman teman.
kalian bisa inisialisai kan dulu, cara ketikan npm init di terminal
setelah itu kita install package nya, ketikan ini di terminal kalian.
npm install sortablejs --save
bila sudah maka akan seperti ini struktur folder nya.
setelah itu panggil script nya di index.html
oke selanjutnya kita buat script nya seperti berikut.
jalan kan index.html di webrowser dan coba teman teman sort datanya.
awalnya datanya seperti di atas, apabila kita drag data yang bernama risman ke row ke dua, maka akan berpindah seperti berikut.
nah mudah bukan teman teman. sekian Tutorial Sortable table dengan SortableJS, semoga bermanfaat yah teman teman.
The post Tutorial Sortable dengan SortableJS appeared first on Kursus Website Terbaik.