Added selection for data tables

Author: fo-code

package-lock.json

@@ -10,6 +10,7 @@
     "datatables.net-buttons-bs5": "^2.2.2",
     "datatables.net-colreorder-bs5": "^1.5.5",
     "datatables.net-responsive-bs5": "^2.2.9",
+    "datatables.net-select-bs5": "^1.3.4",
     "datatables.mark.js": "^2.1.0",
     "mark.js": "^8.11.1",
     "remark-cli": "^10.0.1",

package.json

@@ -156,6 +156,14 @@
                   <directory>${project.basedir}/node_modules/datatables.net-responsive-bs5/js</directory>
                   <filtering>false</filtering>
                 </resource>
+                <resource>
+                  <directory>${project.basedir}/node_modules/datatables.net-select/js</directory>
+                  <filtering>false</filtering>
+                </resource>
+                <resource>
+                  <directory>${project.basedir}/node_modules/datatables.net-select-bs5/js</directory>
+                  <filtering>false</filtering>
+                </resource>
                 <resource>
                   <directory>${project.basedir}/node_modules/datatables.mark.js/dist</directory>
                   <filtering>false</filtering>
@@ -198,6 +206,10 @@
                   <directory>${project.basedir}/node_modules/datatables.net-responsive-bs5/css</directory>
                   <filtering>false</filtering>
                 </resource>
+                <resource>
+                  <directory>${project.basedir}/node_modules/datatables.net-select-bs5/css</directory>
+                  <filtering>false</filtering>
+                </resource>
               </resources>
             </configuration>
           </execution>

pom.xml

@@ -18,6 +18,7 @@ public class TableConfiguration {
     private boolean useResponsive = false;
     private boolean useColReorder = false;
     private boolean useButtons = false;
+    private boolean useSelect = false;
 
     /**
      * Make the table responsive, i.e. the columns wrap over to a child column.
@@ -101,6 +102,31 @@ public boolean isUseButtons() {
         return useButtons;
     }
 
+    /**
+     * Enable selection.
+     *
+     * @param selectionStyle
+     *          The <a href="https://datatables.net/reference/option/select.style">select.style</a> option
+     *
+     * @return this {@link TableConfiguration} for chaining methods
+     *
+     * @see <a href="https://datatables.net/reference/option/select">https://datatables.net/reference/option/select</a>
+     */
+    public TableConfiguration select(final String selectionStyle) {
+        configuration.put("select", selectionStyle);
+        useSelect = true;
+        return this;
+    }
+
+    /**
+     * Returns whether select is configured to be used.
+     *
+     * @return true, if select should be used, false otherwise
+     */
+    public boolean isUseSelect() {
+        return useSelect;
+    }
+
     /**
      * Enable saving of the table state.
      *

src/main/java/io/jenkins/plugins/datatables/TableConfiguration.java

@@ -0,0 +1,19 @@
+<?jelly escape-by-default='true'?>
+<!--
+Use it like <st:adjunct includes="io.jenkins.plugins.data-tables-select"/>
+-->
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
+
+  <j:new var="h" className="hudson.Functions"/>
+  ${h.initPageVariables(context)}
+
+  <st:adjunct includes="io.jenkins.plugins.jquery3"/>
+  <st:adjunct includes="io.jenkins.plugins.bootstrap5"/>
+  <st:adjunct includes="io.jenkins.plugins.data-tables"/>
+
+  <link type="text/css" rel="stylesheet" href="${resURL}/plugin/data-tables-api/css/select.bootstrap5.min.css"/>
+
+  <script type="text/javascript" src="${resURL}/plugin/data-tables-api/js/dataTables.select.min.js"/>
+  <script type="text/javascript" src="${resURL}/plugin/data-tables-api/js/select.bootstrap5.min.js"/>
+
+</j:jelly>

src/main/resources/io/jenkins/plugins/data-tables-select.jelly

@@ -81,3 +81,14 @@ div.details-control {
 .form-select-sm, .form-control-sm {
     margin: 0.2em;
 }
+
+/* ------------------------------------------------------------------------------------------------------------------- */
+/* DataTables select                                                                                                  */
+/* ------------------------------------------------------------------------------------------------------------------- */
+table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
+    background-color: #b4b4b4 !important;
+}
+
+table.dataTable tbody tr.selected, table.dataTable tbody th.selected, table.dataTable tbody td.selected {
+    color: black !important;
+}

src/main/webapp/css/jenkins-style.css

@@ -32,6 +32,17 @@ void shouldCreateResponsiveConfiguration() {
         assertThat(configuration).isUseResponsive();
     }
 
+    @Test
+    void shouldCreateSelectConfiguration() {
+        TableConfiguration configuration = new TableConfiguration().select("single");
+
+        assertThat(configuration).hasConfiguration("{\"select\":\"single\"}");
+        assertThat(configuration).isNotUseButtons();
+        assertThat(configuration).isNotUseColReorder();
+        assertThat(configuration).isNotUseResponsive();
+        assertThat(configuration).isUseSelect();
+    }
+
     @Test
     void shouldCreateColReorderConfiguration() {
         TableConfiguration configuration = new TableConfiguration()