Bootstrap – Memindahkan Form Pencarian Tabel

Memindahkan Form Pencarian Tabel – Tabel pada sebuah template bootstrap adalah elemen penting tidak asing dan harus digunakan. Fungsi tabel ini untuk memudahkankan dalam menampilkan data yang ada pada tabel database. Untuk desain yang menarik, kadang kita perlu mengedit komponen style atau desain bawaan yang ada pada tabel tersebut. Contohnya saja yang akan kita lakukan adalah memindahkan kotak pencarian pada tabel bootrap menjadi pindah posisi. Contoh perubahan yang bisa dilakukan dari form tersebut, misalnya pencarian jadi sebelah kiri, entri row atau jumlah baris yang ditampilkan jadi sebelah kanan, atau bahkan kedua tersebut dapat kita posisikan pada bigian bawah tabel. oke Caranya akan kita bahas kali ini.

Memindahkan Form Pencarian Tabel

Untuk memindahkan form pencarian atau search box pada tabel bootstrap mudah saja, cukup menggunakan script javascript yang kita tempatkan pada bagian bawah  dari template yang kita gunakan, maka search akan mudah pindah sesuai dengan yang kita inginkan. Oke, yang perlu di ketahui posisi pemindahannya yaitu: kiri atas, kanan bawah, kiri atas, bawah atas atau desain dimana posisi yang kita inginkan. Letakkan jquery berikut ini di atas tag </body>,

# Show entries (kanan) – search box (kiri) – atas

$(document).ready(function() {
 $('#t1').DataTable( {
 "dom": '<"top"<"pull-left"f><"pull-right"l>>rt<"bottom"<"pull-left"i><"pull-right"p>>'
 } );

 } );

Hasilnya:

# Show entries (kanan) – search box (kiri) – bawah

$(document).ready(function() {
 $('#t1').DataTable( {
 "dom": '<"top"<"pull-left"i><"pull-right"p>>rt<"bottom"<"pull-left"f><"pull-right"l>>'
 } );

 } );

Hasilnya:

# Show entries (kiri) – search box (kanan) – atas

$(document).ready(function() {
 $('#t1').DataTable( {
 "dom": '<"top"<"pull-left"l><"pull-right"f>>rt<"bottom"<"pull-left"i><"pull-right"p>>'
 } );

 } );

Hasilnya:

Demikian Memindahkan Form Pencarian Tabel menggunakan jquery. Semoga bermanfaat.

Klik WA: 082285417494