Cara Menambahkan Plugin Pagination Ke dalam Codeigniter

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

Cara Menambahkan Plugin Pagination Ke dalam Codeigniter

Saya meletakkan file di dalam folder asset/js/smpPagination.js kemudian siapkan databasenya

Cara Menambahkan Plugin Pagination Ke dalam Codeigniter

Dan isi data pada postingannya, kemudian buat controller dengan nama Blog.php kemudian ketikkan script seperti gambar di bawah ini

Cara Menambahkan Plugin Pagination Ke dalam Codeigniter

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

Cara Menambahkan Plugin Pagination Ke dalam Codeigniter

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.

Hernowo Author

Leave a Reply

Your email address will not be published. Required fields are marked *