make previous & next button effective on change_list.html

Author: wuyue92tree

adminlteui/templates/admin/pagination.html

@@ -24,21 +24,48 @@
              id="example2_paginate">
             <ul class="pagination">
                 {% if pagination_required %}
-                <li class="paginate_button previous disabled"
-                    id="example2_previous">
-                    <a href="#" aria-controls="example2" data-dt-idx="0"
-                       tabindex="0">{% trans 'Previous' %}</a></li>
-                {% for i in page_range %}
-                {% adminlte_paginator_number cl i %}
-                {% endfor %}
-                <li class="paginate_button next disabled" id="example2_next">
-                    <a href="#"
-                       aria-controls="example2"
-                       data-dt-idx="7"
-                       tabindex="0">{% trans 'Next' %}</a>
-                </li>
+                    <li class="paginate_button previous disabled"
+                        id="example2_previous">
+                        <a href="#" aria-controls="example2" data-dt-idx="0"
+                           tabindex="0">{% trans 'Previous' %}</a></li>
+                    {% for i in page_range %}
+                        {% adminlte_paginator_number cl i %}
+                    {% endfor %}
+                    <li class="paginate_button next disabled" id="example2_next">
+                        <a href="#"
+                           aria-controls="example2"
+                           data-dt-idx="7"
+                           tabindex="0">{% trans 'Next' %}</a>
+                    </li>
+                    <script type="text/javascript">
+                        let pageRange = []
+                        {% for p in page_range %}
+                            pageRange.push('{{ p }}')
+                        {% endfor %}
+                        // console.log(pageRange)
+                        let currentPage = document.querySelector("#example2_paginate > ul > li.active > a").innerText
+                        let previous = document.querySelector("#example2_previous > a")
+                        let next = document.querySelector("#example2_next > a")
+                        let target_href = window.location.search.replace(/\?p=\d+/g, '').replace(/&p=\d+/g, '')
+                        // previous button
+                        if ((Number(pageRange[0]) + 1).toString() !== currentPage) {
+                            previous.parentElement.setAttribute('class', 'paginate_button previous')
+                            previous.setAttribute('href', target_href? target_href + `&p=${Number(currentPage) -2}`: target_href + `?p=${Number(currentPage) -2}`)
+                        } else {
+                            previous.parentElement.setAttribute('class', 'paginate_button previous disabled')
+                            previous.setAttribute('href', 'javascript:void(0);')
+                        }
+                        // next button
+                        if ((Number(pageRange[pageRange.length-1]) + 1).toString() !== currentPage) {
+                            next.parentElement.setAttribute('class', 'paginate_button next')
+                            next.setAttribute('href', target_href? target_href + `&p=${currentPage}`: target_href + `?p=${currentPage}`)
+                        } else {
+                            next.parentElement.setAttribute('class', 'paginate_button next disabled')
+                            next.setAttribute('href', 'javascript:void(0);')
+                        }
+                    </script>
                 {% endif %}
             </ul>
         </div>
     </div>
-</div>
+</div>