bitbake: toaster: add pagination to the Simple UI

In an effort to make the Simple UI more usable and
reponsive, this patch adds pagination support for the
pages with lots of entries: Builds, Configuration and
Tasks.

(Bitbake rev: d4f075c050ad9ecebe750420d49961a7f30d090b)

Signed-off-by: Alexandru DAMIAN <alexandru.damian@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

1 files changed, 20 insertions, 2 deletions

diff --git a/bitbake/lib/toaster/bldviewer/templates/basetable.html b/bitbake/lib/toaster/bldviewer/templates/basetable.html
index 083bcb82e9..16628eafbe 100644
--- a/bitbake/lib/toaster/bldviewer/templates/basetable.html
+++ b/bitbake/lib/toaster/bldviewer/templates/basetable.html
@@ -26,7 +26,7 @@ function filterTableRows(test) {
 
     {% block pagename %}
     {% endblock %}
-    <div align="left" style="display:inline-block; width: 40%; margin-left: 2em"> Search: <input type="search" id="filterstring" style="width: 80%" onkeyup="filterTableRows($('#filterstring').val())" autocomplete="off">
+    <div align="left" style="display:inline-block; width: 40%; margin-left: 2em"> Filter: <input type="search" id="filterstring" style="width: 80%" onkeyup="filterTableRows($('#filterstring').val())" autocomplete="off">
     </div>
     {% if hideshowcols %}
     <div align="right" style="display: inline-block; width: 40%">Show/Hide columns:
@@ -36,7 +36,25 @@ function filterTableRows(test) {
     </div>
     {% endif %}
 </div>
-<div>
+
+   <div style="display: block; float:right; margin-left: auto; margin-right:5em"><span class="pagination" style="vertical-align: top; margin-right: 3em">Showing {{objects.start_index}} to {{objects.end_index}} out of {{objects.paginator.count}} entries.&nbsp;</span>
+   <ul class="pagination" style="display: block-inline">
+{%if objects.has_previous %}
+  <li><a href="?page={{objects.previous_page_number}}">&laquo;</a></li>
+{%else%}
+  <li class="disabled"><a href="#">&laquo;</a></li>
+{%endif%}
+{% for i in objects.page_range %}
+  <li{%if i == objects.number %} class="active" {%endif%}><a href="?page={{i}}">{{i}}</a></li>
+{% endfor %}
+{%if objects.has_next%}
+  <li><a href="?page={{objects.next_page_number}}">&raquo;</a></li>
+{%else%}
+  <li class="disabled"><a href="#">&raquo;</a></li>
+{%endif%}
+  </ul>
+</div>
+
     <table class="table table-striped table-condensed" style="width:95%">
 {% block pagetable %}
 {% endblock %}