Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website,pada kesempatan kali ini saya akan memberikan tips tentang Cara Menambahkan Plugin Pagination Ke dalam Codeigniter. Dalam latihan kali ini kita akan menambahkan plugin pagination jQuery ke dalam codeigniter, dengan menggunakan plugin ini teman – teman tidak usah pusing lagi dalam pembuatan pagination menggunakan library pagination codeigniter.
Karena sudah ada plugin yang memudahkan kita dalam pembuatan fitur, langsung saja kita implementasikan Cara Menambahkan Plugin Pagination Ke dalam Codeigniter pertama – tama download codeigniternya kemudian plugin paginationnya. Jika sudah letakkan plugin yang sudah di download di dalam folder sejajar dengan application
Saya meletakkan file di dalam folder asset/js/smpPagination.js kemudian siapkan databasenya
Dan isi data pada postingannya, kemudian buat controller dengan nama Blog.php kemudian ketikkan script seperti gambar di bawah ini
Kemudian buat file di dalam folder model dengan nama Blog_m.php untuk mengambil data dari database, lalu buat file juga di dalam folder views/blog/blog.php untuk menampilkan hasilnya. Dan di file blog.php kita panggil plugin pagination dan link bootstrap 4 nya
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script type="text/javascript" src="<?php echo base_url() ?>asset/js/smpPagination.js"></script>
Kemudian kita looping datanya dan sekaligus buat struktut html nya untuk kebutuhan plugin, plugin ini menghitung data dengan tag li yang di bungkus tag ul dengan id=”pagination-block” maka kita akan menambahkan tag li untuk pembungkus hasil perulangan data dari database
<div class="container"> <h1>Blog</h1> <ul id="pagination-block"> <?php foreach($blog as $rows){ ?> <li> <h2><?php echo $rows->judul; ?></h2> <p><?php echo substr($rows->detail, 0, 350).'...' ?></p> <p><?php echo $rows->tgl ?></p> </li> <?php } ?> </ul> <br> <br> <br> <h4 for="inp_rows">Total Tampil data</h4> <input id="inp_rows" class="form-control" type="number" value=""/> <button id="btn_render" class="btn btn-danger">Change</button> </div>
Dan kita aktifkan pluginnya dengan script di bawah ini
let $inp_rows = $('#inp_rows') ; let params = window.location.search.substring(1).split('&') ; for(let key in params) { let tmp = params[key].split('=') ; params[tmp[0]] = tmp[1] ; } const perPage = params.rows ? parseInt(params.rows) : 6 ; $inp_rows.val(perPage) ; $("#pagination-block li").smpPagination(perPage) ; $('#btn_render').click(function(){ let rows = !!$inp_rows.val() ? $inp_rows.val() : 6 ; window.location.search = '?rows=' + rows ; }) ;
Setelah itu kita custom css nya sedikit
ul li{list-style: none;} button.smpPagination--pagination.next.btn.btn-outline-primary { float: right; } button.smpPagination--pagination.prev.btn.btn-outline-primary.disable { float: left; } #inp_rows, #btn_render{float: left; margin-right: 5px} #inp_rows{width: 70px}
Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini
Di dalam form total tampil data teman – teman bebas menentukan berapa data yang diinginkan pada setiap pages nya, nah itulah Cara Menambahkan Plugin Pagination Ke dalam Codeigniter teman – teman bisa gunakan ini pada projectnya tinggal pakai saja 🙂
Semoga bermanfaat, terimakasih dan sampai jumpa.