Minggu, 20 September 2020

Membuat Pagination dan Carousel Pada Django

Pada website besar kita tentu memiliki database yang akan ditampilkan dalam bentuk halaman website tersebut. Terkadang dengan sangat banyaknya data yang ingin ditampilkan ini, menjadi masalah karena terlalu banyak. Disini kita memerlukan teknik pagination / membaginya dengan banyak halaman yang menampilkan bagian2 data tersebut sehingga tidak terlalu memanjang dan terlalu berat memuat data tersebut.

Disini kita akan menggunakan modul yanv ada di django ya yakni pagination. Berikut ini cara membuatnya:

1. Load modul di view dan tempatkan kode paginate_by = 4 #berarti halaman tidak lebih dari 4 data, sisanya ada dihalaman berikutnya.

2. Sisipkan kode htmlnya di bagian template yang ingin kita bagi perhalaman.

"

 Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}

<div>

<ul class="pagination">

        {% if page_obj.has_previous %}

            <li class='page-item'><a href="?page=1" class='page-link'>&laquo; first</a></li>

            <li class='page-item'><a href="?page={{ page_obj.previous_page_number }}" class='page-link'>previous</a></li>

        {% endif %}


        <li class='page-item'>

        <!--loop for page and change the element by active-->

        {% for i in page_obj.paginator.page_range %}

{% if page_obj.number == i %}

        <li class="page-item active"><a class="page-link">{{ i }} </a></li>

{% else %}

        <li class='page-item'><a href="?page={{ i }}" class="page-link">{{ i }}</a></li>

{% endif %}

    {% endfor %}

        </li>


        {% if page_obj.has_next %}

            <li class='page-item'><a href="?page={{ page_obj.next_page_number }}" class='page-link'>next</a></li>

            <li class='page-item'><a href="?page={{ page_obj.paginator.num_pages }}" class='page-link'>last &raquo;</a></li>

        {% endif %}

    </ul>

</div>

"

Memadukan kode diatas dengan meload boostrap4 anda akan melihat paging yang indah. Cukup mudah bukan, ini sungguh menghemat waktu kita dalam pembuatan kode pagination.

Saya menyarankan untuk membuat refresh data per sekian detik bila memang website anda sangat besar tanpa refresh halaman. Agar data terpantau dengan baik, caranya bisa dengan menggunakan jquery dan ajax. Dengan begitu anda tak perlu repot lagi memikirkan data yang terbaru.

Tidak ada komentar:

Posting Komentar