Add the option to add a toolbar in the table top-left corner.

jenkinsci · Mar 6, 2024 · 3378300 · 3378300
1 parent 9bea2bc
commit 3378300
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/main/resources/data-tables/table.jelly b/src/main/resources/data-tables/table.jelly
@@ -1,5 +1,5 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
   <st:documentation>
     Renders a JQuery DataTables instance. The table data is loaded asynchronously from the associated view using
     an Ajax call. In order to correctly connect the jelly view with the Jenkins ModelObject via a Stapler proxy
@@ -37,7 +37,8 @@
       <div class="table-buttons-container clearfix"/>
     </j:if>
     <table class="table table-hover data-table dt-responsive nowrap ${class}"
-           data-columns-definition="${model.columnsDefinition}" id="${model.id}"
+           data-columns-definition="${model.columnsDefinition}"
+           id="${model.id}"
            data-table-configuration="${model.tableConfigurationDefinition}"
            style="width: 100%;">
       <thead>
@@ -48,6 +49,9 @@
         </tr>
       </thead>
     </table>
+    <div id="toolbar-${model.id}" class="table-toolbar">
+      <d:invokeBody />
+    </div>
   </div>
 
   <st:bind var="tableDataProxy" value="${it}" />

diff --git a/src/main/webapp/js/table.js b/src/main/webapp/js/table.js
@@ -8,7 +8,24 @@ jQuery3(document).ready(function () {
          * Creates the data table instance for the specified table element.
          */
         function createDataTable(table) {
+            const toolbar = $(table).next();
+            let toolbarContent;
+            let bottom;
+            if (toolbar.length && toolbar.children().length > 0) {
+                toolbarContent = toolbar;
+                bottom = ['pageLength', 'info'];
+            }
+            else {
+                toolbarContent = 'pageLength';
+                bottom = 'info';
+            }
             const defaultConfiguration = {
+                layout: {
+                    topStart: toolbarContent,
+                    topEnd: 'search',
+                    bottomStart: bottom,
+                    bottomEnd: 'paging'
+                },
                 stateSave: true,
                 language: {
                     emptyTable: 'Loading - please wait ...'