Changes between Version 11 and Version 12 of DeveloperGuidelines/DataTables


Ignore:
Timestamp:
07/24/11 09:48:47 (10 years ago)
Author:
graeme
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • DeveloperGuidelines/DataTables

    v11 v12  
    77||= Eden Name =||= Purpose =||= Value =||= Remarks =||
    88|| dataTableSelectable || If set this allows the rows to be selected. || Boolean || This is set up as a property of response.s3 ||
    9 || 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 ||
     9|| 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 ||
     10|| 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 ||
     11|| 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 ||
     12|| 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 ||
    1013|| 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 ||
    1114|| dataTable_iDisplayLength \\'''auto''' || The number of rows to be displayed on a page || Integer || ''Confusion...'' dataTable_iDisplayLength and iDisplayLength ||
     
    132135If 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
    133136{{{
     137#!div style="font-size: 80%"
     138  {{{#!python
    134139    query = (r.table.status == 1) # Status of Pending
    135140    rows = db(query).select(r.table.id)
     
    140145    except IndexError: # the delete buttons doen't exist
    141146        pass
    142 }}}
     147  }}}
     148}}}
     149=== Adding a javascript button ===
     150The 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.
     151{{{
     152#!div style="font-size: 80%"
     153Making a action button run some javascript, code taken from s3import._create_import_item_dataTable():
     154  {{{#!python
     155    response.s3.actions = [
     156                            dict(label= str(self.ImportItemDataTableDisplay),
     157                                 _class="action-btn",
     158                                 _jqclick="$('.importItem.'+id).toggle();",
     159                                ),
     160                          ]
     161  }}}
     162}}}
     163This 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.
     164
    143165=== Changing the displayed text ===
    144166Sometimes 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: