bitbake: toaster: Commandline build import table improvements

Added dataTables library to include sorting and pagination for table element

Added jquery.dataTables to customize table rendering in section "Import eventlogs".
This library includes the following: sorting, pagination, search and CSS styles.

Default to ascending order and 50 builds per page.

(Bitbake rev: f88f314cb2b071569acf3c7d43fb7256ba50762f)

Signed-off-by: Marlon Rodriguez Garcia <marlon.rodriguez-garcia@savoirfairelinux.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

1 files changed, 8 insertions, 1 deletions

diff --git a/bitbake/lib/toaster/toastergui/templates/command_line_builds.html b/bitbake/lib/toaster/toastergui/templates/command_line_builds.html
index d6ff685cdf..fcbe80d8d1 100644
--- a/bitbake/lib/toaster/toastergui/templates/command_line_builds.html
+++ b/bitbake/lib/toaster/toastergui/templates/command_line_builds.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% load projecttags %}
 {% load humanize %}
+{% load static %}
 
 {% block title %} Import Builds from eventlogs - Toaster {% endblock %}
 
@@ -68,7 +69,7 @@
                     </h4>
                     {% if files %}
                     <div class="table-responsive">
-                        <table class="table col-md-6 table-bordered table-hover">
+                        <table class="table col-md-6 table-bordered table-hover" id="eventlog-table" style="border-collapse: collapse;">
                             <thead>
                             <tr class="row">
                                 <th scope="col">Name</th>
@@ -112,6 +113,8 @@
     </div>
 </div>
 
+<link rel="stylesheet" href="{% static 'css/jquery.dataTables-1.13.8.min.css' %}" type='text/css'/>
+<script src="{% static 'js/jquery.dataTables-1.13.8.min.js' %}"> </script>
 <script>
 
 function _ajax_update(file, all, dir){
@@ -193,6 +196,10 @@ $( "#form_file").on( "submit", function( event ) {
         }, 10000)
 });
 
+$(document).ready( function () {
+    $('#eventlog-table').DataTable({order: [[0, 'desc']], "pageLength": 50});
+});
+
 </script>
 
 {% endblock %}