Tabel Rowspan Otomatis / Dinamis Dengan jQuery Rowspanizer


Dalam membuat sistem informasi berbasis web pastinya menemui kasus menampilkan data dengan rowspan (dalam excel biasa disebut dengan merge cell) dinamis yang diambil dari database. Pembuatan bisa manual menggunakan php dengan menghitung jumlah baris yang sama, akan tetapi butuh pengetahuan yang cukup untuk membuat hal tersebut. Cara lain adalah menggunakan plugin jQuery - rowspanizer.js. Rowspanizer.js adalah plugin jQuery sangat sederhana yang digunakan untuk secara otomatis menggabungkan / rowspan sel tabel (td) yang memiliki nilai yang sama.
Cara menggunakan:
  • Letakkan jQuery dan plugin jQuery rowspanizer.js di akhir dokumen sehingga halaman dimuat lebih cepat.
1<script src="//code.jquery.com/jquery.min.js"></script>
2<script src="jquery.rowspanizer.js"></script>

  • Panggil saja fungsi pada tabel yang ada dan selesai. 
1$("table").rowspanizer();
  • Atur vertical alignment sel tabel. 
1$("table").rowspanizer({
2  vertical_align:'middle'
3});
  • Tentukan kolom yang akan digabung (opsional).
1$('table').rowspanizer({
2  columns: [0,1,2]
3});

Untuk lebih jelasnya, silahkan klik berikut: DEMO  

Source Lengkap sebagai berikut:

Ahmad Shoffa

Suka jalan-jalan untuk mencari inspirasi. Beginner Web Developer

Posting Komentar

Lebih baru Lebih lama