This example, which uses server-side dynamic data, demonstrates how to filter data into a DataTable using Menu Buttons and custom-generated query strings.
This example also shows how to keep the Paginator in sync with the data loaded into the DataTable.
When complex filtering of dynamic data is required, a custom generateRequest
function is used to generate customized requests which are passed into DataSource's sendRequest
method to populate the DataTable.
Sample Data:
1 | { |
2 | "recordsReturned": 25, |
3 | "totalRecords": 209, |
4 | "startIndex": 0, |
5 | "records": [ |
6 | { |
7 | "name": "Total population: Total", |
8 | "state1": "12419293", |
9 | "state2": "9938444", |
10 | "state3": "8186453" |
11 | }, |
12 | { |
13 | "name": "Total population: Male", |
14 | "state1": "6080336", |
15 | "state2": "4873095", |
16 | "state3": "4027113" |
17 | }, |
18 | ... |
19 | ] |
20 | } |
view plain | print | ? |
CSS:
1 | .yui-skin-sam .yui-dt table { |
2 | width: 100%; |
3 | } |
4 | .yui-skin-sam .yui-dt th.yui-dt-col-name { |
5 | width: 301px; |
6 | } |
7 | .yui-skin-sam .yui-dt .yui-dt-col-state1, |
8 | .yui-skin-sam .yui-dt .yui-dt-col-state2, |
9 | .yui-skin-sam .yui-dt .yui-dt-col-state3 { |
10 | width: 133px; |
11 | text-align: right; |
12 | } |
13 | #containerContainer { |
14 | width: 100%; |
15 | height: 64px; |
16 | padding: 8px 0; |
17 | } |
18 | #genderRadioContainer { |
19 | float: left; |
20 | width: 301px; |
21 | } |
22 | #stateSelectContainer { |
23 | float: left; |
24 | width: 399px; |
25 | } |
26 | #stateSelectContainer .yui-button button{ |
27 | width: 123px; |
28 | *width: 121px; |
29 | _width: 118px; |
30 | font-size: 85%; |
31 | line-height: 1.5; |
32 | } |
33 | #statePaginator { |
34 | text-align: center; |
35 | } |
view plain | print | ? |
Markup:
1 | <div id="genderRadioContainer"> |
2 | <p>Select a gender filter.</p> |
3 | <input type="radio" name="gender" value="Both" checked> |
4 | <input type="radio" name="gender" value="Female"> |
5 | <input type="radio" name="gender" value="Male"> |
6 | </div> |
7 | <div id="stateSelectContainer"> |
8 | <p>Select states to compare.</p> |
9 | <input type="button" class="menuButton" id="state1" value="State 1"> |
10 | <select id="state1Select"> |
11 | <option value="04000US01">Alabama</option> |
12 | <option value="04000US02">Alaska</option> |
13 | ... |
14 | </select> |
15 | |
16 | <input type="button" class="menuButton" id="state2" value="State 2"> |
17 | <select id="state2Select"> |
18 | <option value="04000US01">Alabama</option> |
19 | <option value="04000US02">Alaska</option> |
20 | ... |
21 | </select> |
22 | |
23 | <input type="button" class="menuButton" id="state3" value="State 3"> |
24 | <select id="state3Select"> |
25 | <option value="04000US01">Alabama</option> |
26 | <option value="04000US02">Alaska</option> |
27 | ... |
28 | </select> |
29 | </div> |
30 | |
31 | <div id="statePaginator"><!-- The Paginator widget is rendered here --></div> |
32 | |
33 | <div id="stateTable"><!-- The DataTable widget is rendered here --></div> |
view plain | print | ? |
generateRequest
FunctionDataTable has a default generateRequest
function which needs to be overridden in order to create a custom query string. Keep in mind that DataTable's if column sorting is enabled, the column sort state also needs to be taken into account. Although this example does not use enable DataTable's column sorting, the comments in the code indicate integration points for that feature. Here we define a custom function, this.requestBuilder
, to generate requests to our server that reflect the user's filtration settings:
1 | requestBuilder: function (oState, oSelf) { |
2 | /* We aren't initializing sort and dir variables. If you are |
3 | using column sorting built into the DataTable, use this |
4 | set of variable initializers. |
5 | var sort, dir, startIndex, results; */ |
6 | |
7 | var startIndex, results; |
8 | |
9 | oState = oState || {pagination: null, sortedBy: null}; |
10 | |
11 | /* If using column sorting built into DataTable, these next two lines |
12 | will properly set the current _sortedBy_ column and the _sortDirection_ |
13 | sort = (oState.sortedBy) ? oState.sortedBy.key : oSelf.getColumnSet().keys[0].getKey(); |
14 | dir = (oState.sortedBy && oState.sortedBy.dir === DataTable.CLASS_DESC) ? "desc" : "asc"; */ |
15 | |
16 | startIndex = (oState.pagination) ? oState.pagination.recordOffset : 0; |
17 | results = (oState.pagination) ? oState.pagination.rowsPerPage : null; |
18 | |
19 | return "&results=" + results + |
20 | "&startIndex=" + startIndex + |
21 | "&state[1]=" + CF.settings.state1 + |
22 | "&state[2]=" + CF.settings.state2 + |
23 | "&state[3]=" + CF.settings.state3 + |
24 | "&gender=" + CF.settings.gender; |
25 | }, |
view plain | print | ? |
The custom function this.requestBuilder
is then passed in as the generateRequest
value.
1 | // Set the DataTable configuration |
2 | myConfigs = { |
3 | generateRequest: this.requestBuilder |
4 | ... more config settings ... |
5 | }; |
view plain | print | ? |
When the user interacts with the MenuButton controls to trigger requests for filtered data, our custom generateRequest
function provides the proper request string to DataSource's sendRequest
method, which also requires a callback
object.
This callback accepts four properties that are very important here.
onDataReturnSetRows
is what is required.getState()
-- is passed as the argument value. If any changes to the Paginator UI need to be done, those changes should to be reflected in this state object. For example, if the page needs to be reset to 1, set that here and the Paginator will be updated to reflect that value when the data is returned.1 | fireDT: function (resetRecordOffset) { |
2 | var oState = CF.myDataTable.getState(), |
3 | request, |
4 | oCallback; |
5 | |
6 | /* We don't always want to reset the recordOffset. |
7 | If we want the Paginator to be set to the first page, |
8 | pass in a value of true to this method. Otherwise, pass in |
9 | false or anything falsy and the Paginator will remain at the |
10 | page it was set at before.*/ |
11 | if (resetRecordOffset) { |
12 | oState.pagination.recordOffset = 0; |
13 | } |
14 | |
15 | /* If the column sort direction needs to be updated, that may be done here. |
16 | It is beyond the scope of this example, but the DataTable::sortColumn() method |
17 | has code that can be used with some modification. */ |
18 | |
19 | /* |
20 | This example uses onDataReturnSetRows because that method |
21 | will clear out the old data in the DataTable, making way for |
22 | the new data.*/ |
23 | oCallback = { |
24 | success : CF.myDataTable.onDataReturnSetRows, |
25 | failure : CF.myDataTable.onDataReturnSetRows, |
26 | argument : oState, |
27 | scope : CF.myDataTable |
28 | }; |
29 | |
30 | // Generate a query string |
31 | request = CF.myDataTable.get("generateRequest")(oState, CF.myDataTable); |
32 | |
33 | // Fire off a request for new data. |
34 | CF.myDataSource.sendRequest(request, oCallback); |
35 | } |
view plain | print | ? |
In order to update the Paginator's totalRecords
value as the data is returned, override the DataTable's handleDataReturnPayload
method. This will enable the Paginator to calculate how many pages of data have been returned for each request at runtime. The rest of the work is done for us automatically through the oCallback
object set in our sendRequest
method call.
1 | myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) { |
2 | oPayload.totalRecords = oResponse.meta.totalRecords; |
3 | return oPayload; |
4 | } |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Copyright © 2010 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings