Changeset 10986 for main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html

Timestamp:

27 Jan 2014, 11:43:55 (11 years ago)

Author:

Henrik Bettermann

Message:

Add jquery.DataTables? 1.9.4.

Use bootstrap-theme.min.css.

File:

• main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html (modified) (5 diffs)

main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html

@@ -11 +11 @@
     <link href="bootstrap/css/bootstrap.min.css"
           rel="stylesheet">
+    <link href="bootstrap/css/bootstrap-theme.min.css"
+          rel="stylesheet">
+
+    <link href="static/css/jquery.dataTables.css"
+          rel="stylesheet">
+
     <link href="static/css/base.css" rel="stylesheet">
 
@@ -20 +26 @@
     <!-- icons -->
     <link rel="shortcut icon" href="static/ico/favicon.ico">
-    <link rel="apple-touch-icon-precomposed" sizes="144x144"
-          href="static/ico/apple-touch-icon-144-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="114x114"
-          href="static/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72"
-          href="static/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed"
-          href="static/ico/apple-touch-icon-57-precomposed.png">
+
 
   </head>
@@ -175 +174 @@
             </div>
             <div>...content that spans the whole page.</div>
+            <br><br>
             <div id="#sampleform">
               <form method="post">
                 <fieldset id="form-fieldset">
                   <legend>A Sample Form</legend>
-                  <div class="form-field">
+                  <div class="form-group">
                     <label>Some Label</label>
                     <input type="text" class="textType"
                            name="myinput[]" placeholder="A name..." />
                   </div>
-                  <button type="submit" class="btn rowadd">
+                  <button type="submit" class="btn rowadd btn-default">
                     Add row
                   </button>
@@ -192 +192 @@
               </form>
             </div> <!-- /sampleform -->
-          </div> <!-- /well -->
-
-
-
-
+            <br><br>
+            <h3>A Sample Data Table</h3>
+            <table id="#dadatable" class="table dataTable">
+              <thead>
+                <tr>
+                  <th>Id</th>
+                  <th>Name</th>
+                  <th>Portal Roles</th>
+                  <th>Local Roles</th>
+                  <th></th>
+                </tr>
+              </thead><tbody><tr><td>admin</td>
+                  <td>John</td>
+                  <td nowrap="nowrap">Portal Manager <br />Academics Officer (view only) </td>
+                  <td>Owner</td>
+                  <td class="text-right">
+                    <form method="post">
+                      <input type="hidden" name="userid" value="admin" />
+                      <input class="btn btn-sm btn-primary" type="submit" name="manage" value="Manage" />
+                      <input class="btn btn-sm btn-default" type="submit" name="delete" value="Remove" />
+                    </form>
+                  </td>
+                </tr>
+                <tr>
+                  <td>tester</td>
+                  <td>Vitali</td>
+                  <td nowrap="nowrap">Academics Officer (view only)</td>
+                  <td>Owner</td>
+                  <td class="text-right">
+                    <form method="post">
+                      <input type="hidden" name="userid" value="your_id" />
+                      <input class="btn btn-sm btn-primary" type="submit" name="manage" value="Manage" />
+                      <input class="btn btn-sm btn-default" type="submit" name="delete" value="Remove" />
+                    </form>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div> <!-- /well -->
         </div> <!-- /kofa-content-wide -->
       </div> <!-- /row -->
@@ -222 +256 @@
          evt.preventDefault();
          /* Add first .form-field after last .form-field... */
-         $(".form-field:last").after($(".form-field:first").clone().hide().fadeIn());
+         $(".form-group:last").after($(".form-group:first").clone().hide().fadeIn());
       });
     </script>
 
+    <script src="static/js/jquery.dataTables.min.js"></script>
+
+    <script type="text/javascript">
+      $(document).ready(function(){
+        $('.dataTable').dataTable();
+
+        $('.dataTableFiles').dataTable( {
+                "aaSorting": [[ 2, "desc" ]],
+        } );
+
+        $('.dataTableManage').dataTable( {
+                "aaSorting": [[ 1, "asc" ]],
+                "aoColumnDefs":[{ "bSortable": false, "aTargets": [ 0 ] }]
+        } );
+
+        $('.dataTableManageFiles').dataTable( {
+                "aaSorting": [[ 3, "desc" ]],
+                "aoColumnDefs":[{ "bSortable": false, "aTargets": [ 0 ] }]
+        } );
+      });
+    </script>
+
   </body>
 </html>