March 12, 2017

Membuat Pagination di Modal Bootstrap dengan Framework Laravel

Share this
  •  
  •  
  •  
  •  
  •  
  •  

Assalamualaikum wr wb, pada kesempatan kali ini saya akan membagi tutorial tentang cara membuat Pagination di Modal Bootstrap dengan Framework Laravel. Modal bootstrap merupakan konten yang berupa kotak dialog untuk menampilkan informasi tertentu.

Terdapat banyak pertanyaan dari teman-teman pada waktu menampilkan sebuat tabel pada modal bootstrap, ketika di klik pada paginationnya, halaman akan lepas dan keluar dari modal.

Membuat Pagination di Modal Bootstrap dengan Framework Laravel

Hal ini terkadang menjadi dilema bagi seorang programmer, kita dapat menampilkan sebuah informasi penunjang berupa tabel pada modal bootstrap pada aplikasi kita, tetapi terkadang kita memilih menampilkan informasi itu pada halaman lain, karena terkendala masalah pagination dan data yang terlalu banyak.

Tetapi hal tersebut dapat diatasi dengan mudah dengan menambahkan JQuery sehingga request akan dijalankan dalam bentuk Ajax.

Oke, tanpa basa basi langsung saja kita membuat Pagination di Modal Bootstrap dengan Framework Laravel 😀 .

Struktur Tabel

Tabel yang saya gunakan adalah tabel post dengan jumlah data 1000 rows.

Langkah pertama, kita buat script untuk menampilkan modal dengan ukuran large pada layouts (agar bisa di pakai di konten yang lain).

Tambahkan javascript yang di gunakan untuk menampilkan modal Large.

Selanjutnya buat contoller untuk menampilkan halaman yang isinya tombol view data.

untuk view modalPagination.blade.php.

Kemudian buat controler untuk menampilkan view yang akan muncul pada konten modal bootstrap.

Lanjutkan membuat viewnya viewModalPagination.blade.php, untuk javascriptnya saya buat juga pada file ini, berikut adalah scriptnya :

Uji Coba

Setelah semua script di atas di buat, kita mulai uji coba dengan menampilkan halaman index yang terdapat tombol viewdata.

Membuat Pagination di Modal Bootstrap dengan Framework Laravel

Kemudian klik tombol tersebut untuk menampilkan modal bootstrap.

Membuat Pagination di Modal Bootstrap dengan Framework Laravel

Untuk mencoba, klik link paginationnya.

Membuat Pagination di Modal Bootstrap dengan Framework Laravel

Membuat Pagination di Modal Bootstrap dengan Framework Laravel

Kita bisa lihat di console, pagination request menggunakan ajax.

Membuat Pagination di Modal Bootstrap dengan Framework Laravel

Membuat Pagination di Modal Bootstrap dengan Framework Laravel

Mudah bukan 😀 , sekian tutorial dari saya, semoga dapat bermanfaat, tetap belajar dan berusaha. Terimakasih.

source code : https://github.com/AgusWijiSuhariono/demoApp

Agus Wiji Suhariono

Memulai menulis Blog pada bulan November dari Tahun 2015. Penulis merupakan alumni dari Politeknik Negeri Malang angkatan 2011 Program Studi Manajemen Informatika, Jurusan Elektro. Penulis memulai menekuni dunia programming mulai tahun 2014 dan sekarang bekerja di Pemerintahan sebagai IT Staff.

You may also like...