Membuat Paging Datatable Bootstrap Tetap Jika di Klik / di Pilih

Membuat Paging Datatable Bootstrap Tetap Jika di Klik / di Pilih

Membuat Paging Datatable Bootstrap Tetap Jika di Klik / di Pilih – Bootstrap adalah desain yang sekarang sedang berkembang dalam desain sebuah website. Salah satu plugin yang di kembangkan yang dapat di integerasikan dengan desain bootstrap adalah datatable.

Pada datatable terdapat paging jika data yang di tampilkan berjumlah sangat banyak. Nah masalah yang sering di hadapai termasuk yang saya hadapi yaitu, ketika data pada tabel sangat banyak, dan terdapat paging kita klik salah satu no paging misal 2 atau 10, dan ketika di refresh atau di load kembali maka halaman paging akan otomatis kembali lagi ke bagian awal yaitu halaman satu.

Masalah di atas sangat membaut sebuah desain yang tidak efisien. Setelah mencari referensi sana sini, akhirnya ketemu sebuah fungsi jquery yang dapat membaut pagin halaman tetap statis jika browser di refresh sekalipun.

Paging Tetap jika di Refresh

Caranya cukup simpel dan mudah tambahkan script berikut ini sebelum tag </body> pada bagian bawah atau footer template yang kita gunakan.

<script>
 $(document).ready(function() {
 $('#t1').DataTable({
 responsive: true,
 stateSave: true // keep paging
 });
 });

</script>

Inti dari script yang menjaga agar pagin tetap berada pada posisi ketika di klik yaitu statSave:true Untuk script yang di atasnya adalah fungsi yang lain  yang saya gunakan pada datatable. Begitupula untuk tab pada bootstrap, kadang jika di refresh, maka tab akan kembali pada tab awal.