Changes between Version 11 and Version 12 of DeveloperGuidelines/DataTables

Timestamp:

07/24/11 09:48:47 (14 years ago)

Author:

graeme

Comment:

--

DeveloperGuidelines/DataTables

@@ -7 +7 @@
 ||= Eden Name =||= Purpose =||= Value =||= Remarks =||
 || dataTableSelectable || If set this allows the rows to be selected. || Boolean || This is set up as a property of response.s3 ||
-|| actions || The list of action buttons to be displayed in the first column. || List of actions. Each action is a dictionary values. And consists of the label, the HTML class and the URL. Optionally it may also include a restrict list that restricts these buttons to being displayed to just the ids on the list. || This is set up as a property of response.s3 ||
+|| dataTableSelectAll || Only works if dataTableSelectable is set to True. The default is no elements are initially selected, by setting this to True all elements will initially be selected. || Boolean || This is set up as a property of response.s3 ||
+|| dataTableSelectSubmitURL || Only works if dataTableSelectable is set to True. This is the URL to which the submit button will send the selected details. || Boolean || This is set up as a property of response.s3 ||
+|| dataTablePostMethod || Only works if dataTableSelectable is set to True. The default mechanism is to send the details of the selected elements as part of the URL. If this is set then the details will be sent as a POST. However this does require a form to be wrapped around the dataTable. || Boolean || This is set up as a property of response.s3 ||
+|| actions || The list of action buttons to be displayed in the first column. The default action is to send a command to the server a new _jqclick option will attach some java script to the button rather send a request to the server. || List of actions. Each action is a dictionary values. And consists of the label, the HTML class and the URL. Optionally it may also include a restrict list that restricts these buttons to being displayed to just the ids on the list. || This is set up as a property of response.s3 ||
 || dataTableID \\'''auto''' || The HTML id that will be used to identify this table || String \\'''default value''' 'list' || Set up using s3mgr.configure in the pre-processing ||
 || dataTable_iDisplayLength \\'''auto''' || The number of rows to be displayed on a page || Integer || ''Confusion...'' dataTable_iDisplayLength and iDisplayLength ||
@@ -132 +135 @@
 If you want to add additional restrictions to the automatically provided buttons then try the following code, which has been used to restrict the delete button to records with a certain status
 {{{
+#!div style="font-size: 80%"
+  {{{#!python
     query = (r.table.status == 1) # Status of Pending
     rows = db(query).select(r.table.id)
@@ -140 +145 @@
     except IndexError: # the delete buttons doen't exist
         pass 
-}}}
+  }}}
+}}}
+=== Adding a javascript button ===
+The standard buttons are basically an HTML A tag which will send a message back to the server. However it is possible to attach some javascript to the button. The following code provides such a button.
+{{{
+#!div style="font-size: 80%"
+Making a action button run some javascript, code taken from s3import._create_import_item_dataTable():
+  {{{#!python
+    response.s3.actions = [
+                            dict(label= str(self.ImportItemDataTableDisplay),
+                                 _class="action-btn",
+                                 _jqclick="$('.importItem.'+id).toggle();",
+                                ),
+                          ]
+  }}}
+}}}
+This code toggles the show hide class of a table that has been embedded within the dataTable. For this specific instance to be implemented the code that generates the dataTable has been modified. The s3import class has it's own function that builds the dataTable. It is based on the code in s3crud, but is not as general.
+
 === Changing the displayed text ===
 Sometimes it can be convenient to change the displayed text of a status field in the dataTable. This can be done by using the response.s3.dataTableDisplay attribute. First I'll change the model to include a status field: