hazelnuts with checkboxes enabled can be sorted by that column - e.g. to see users...
authorThierry Parmentelat <thierry.parmentelat@inria.fr>
Tue, 1 Oct 2013 07:30:04 +0000 (09:30 +0200)
committerThierry Parmentelat <thierry.parmentelat@inria.fr>
Tue, 1 Oct 2013 07:30:04 +0000 (09:30 +0200)
no need to specify aoColumns in datatables_options any lkonger (this even gets discarded anyway)

plugins/hazelnut/__init__.py
plugins/hazelnut/static/js/hazelnut.js
plugins/hazelnut/templates/hazelnut.html
portal/platformview.py
portal/sliceview.py

index e8ecfce..1fa9940 100644 (file)
@@ -5,6 +5,8 @@ class Hazelnut (Plugin):
     # set checkboxes if a final column with checkboxes is desired
     # pass columns as the initial set of columns
     #   if None then this is taken from the query's fields
+    # also please refrain from passing an 'aoColumns' as datatables_options
+    # as we use 'aoColumnDefs' instead
     def __init__ (self, query=None, query_all=None, 
                   checkboxes=False, columns=None, 
                   datatables_options={}, **settings):
@@ -21,7 +23,7 @@ class Hazelnut (Plugin):
         elif self.query:
             self.columns = self.query.fields
             if query_all:
-                # We need a list because sets are not JSON-serilizable
+                # We need a list because sets are not JSON-serializable
                 self.hidden_columns = list(self.query_all.fields - self.query.fields)
             else:
                 self.hidden_columns = []
@@ -29,6 +31,19 @@ class Hazelnut (Plugin):
             self.columns = []
             self.hidden_columns = []
         self.datatables_options=datatables_options
+        # if checkboxes were required, we tell datatables about this column's type
+        # so that sorting can take place on a selected-first basis (or -last of course)
+        # this relies on the template exposing the checkboxes 'th' with class 'checkbox'
+        if self.checkboxes:
+            # we use aoColumnDefs rather than aoColumns -- ignore user-provided aoColumns
+            if 'aoColumns' in self.datatables_options:
+                print 'WARNING: hazelnut uses aoColumnDefs, your aoColumns spec. is discarded'
+                del self.datatables_options['aoColumns']
+            # set aoColumnDefs in datatables_options - might already have stuff in there
+            aoColumnDefs = self.datatables_options.setdefault ('aoColumnDefs',[])
+            # here 'checkbox' is the class that we give to the <th> dom elem
+            # dom-checkbox is a sorting type that we define in hazelnut.js
+            aoColumnDefs.append ( {'aTargets': ['checkbox'], 'sSortDataType': 'dom-checkbox' } )
 
     def template_file (self):
         return "hazelnut.html"
@@ -41,17 +56,19 @@ class Hazelnut (Plugin):
 
     def requirements (self):
         reqs = {
-            'js_files' : [ "js/hazelnut.js", 
-                           "js/manifold.js", "js/manifold-query.js", 
+            'js_files' : [ "js/spin.presets.js", "js/spin.min.js", "js/jquery.spin.js", 
                            "js/dataTables.js", "js/dataTables.bootstrap.js", "js/with-datatables.js",
-                           "js/spin.presets.js", "js/spin.min.js", "js/jquery.spin.js", 
+                           "js/manifold.js", "js/manifold-query.js", 
                            "js/unfold-helper.js",
+                          # hazelnut.js needs to be loaded after dataTables.js as it extends 
+                          # dataTableExt.afnSortData
+                           "js/hazelnut.js", 
                            ] ,
-            'css_files': [ "css/hazelnut.css" , 
-                           "css/dataTables.bootstrap.css",
+            'css_files': [ "css/dataTables.bootstrap.css",
                            # hopefully temporary, when/if datatables supports sPaginationType=bootstrap3
                            # for now we use full_numbers\, with our own ad hoc css 
                            "css/dataTables.full_numbers.css",
+                           "css/hazelnut.css" , 
                            ],
             }
         return reqs
index 12ee398..89275ee 100644 (file)
                 // XXX use $.proxy here !
             };
             // the intention here is that options.datatables_options as coming from the python object take precedence
-            //  XXX DISABLED by jordan: was causing errors in datatables.js     $.extend(actual_options, options.datatables_options );
+           // xxx DISABLED by jordan: was causing errors in datatables.js
+           // xxx turned back on by Thierry - this is the code that takes python-provided options into account
+           // check your datatables_options tag instead 
+           $.extend(actual_options, this.options.datatables_options );
             this.table = this.elmt('table').dataTable(actual_options);
 
             /* Setup the SelectAll button in the dataTable header */
 
     $.plugin('Hazelnut', Hazelnut);
 
+  /* define the 'dom-checkbox' type for sorting in datatables 
+     http://datatables.net/examples/plug-ins/dom_sort.html
+     using trial and error I found that the actual column number
+     was in fact given as a third argument, and not second 
+     as the various online resources had it - go figure */
+    $.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, _, iColumn ) {
+       return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
+           return result=$('td:eq('+iColumn+') input', tr).prop('checked') ? '1' : '0';
+       } );
+    }
+
 })(jQuery);
+
index b49161b..a223d1b 100644 (file)
@@ -2,31 +2,19 @@
   <table class='table table-striped table-bordered dataTable' id='{{domid}}__table'>
     <thead>
       <tr>
-        {% for column in columns %}
-        <th>{{ column }}</th>
-        {% endfor %} 
-        {% for column in hidden_columns %}
-        <th>{{ column }}</th>
-        {% endfor %} 
-        {% if checkboxes %}
-               <th>+/-</th>
-               {% endif %}
-         </tr>
-       </thead> 
+        {% for column in columns %} <th>{{ column }}</th> {% endfor %} 
+        {% for column in hidden_columns %} <th>{{ column }}</th> {% endfor %} 
+        {% if checkboxes %} <th class="checkbox">+/-</th> {% endif %}
+      </tr>
+    </thead> 
     <tbody>
     </tbody>
     <tfoot>
       <tr>
-        {% for column in columns %}
-           <th>{{ column }}</th>
-        {% endfor %} 
-        {% for column in hidden_columns %}
-           <th>{{ column }}</th>
-        {% endfor %} 
-        {% if checkboxes %}
-               <th>+/-</th>
-               {% endif %}
-         </tr>
+        {% for column in columns %} <th>{{ column }}</th> {% endfor %} 
+        {% for column in hidden_columns %} <th>{{ column }}</th> {% endfor %} 
+        {% if checkboxes %} <th>+/-</th> {% endif %}
+      </tr>
     </tfoot> 
   </table>
 </div>
index 16148ee..76699cf 100644 (file)
@@ -35,9 +35,6 @@ class PlatformView(TemplateView):
             query_all = network_query,
             checkboxes = False,
             datatables_options = {
-            # for now we turn off sorting on the checkboxes columns this way
-            # this of course should be automatic in hazelnut
-            'aoColumns'      : [None, None, None, None, {'bSortable': False}],
             'iDisplayLength' : 25,
             'bLengthChange'  : True,
             },
index 175a40e..0732d98 100644 (file)
@@ -133,9 +133,6 @@ class SliceView (LoginRequiredAutoLogoutView):
             query_all  = query_resource_all,
             checkboxes = True,
             datatables_options = { 
-                # for now we turn off sorting on the checkboxes columns this way
-                # this of course should be automatic in hazelnut
-                'aoColumns'     : [None, None, None, None, {'bSortable': False}],
                 'iDisplayLength': 25,
                 'bLengthChange' : True,
                 'bAutoWidth'    : True,