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.
DataTable 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:
The custom function
this.requestBuilder is then passed in as the
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
This callback accepts four properties that are very important here.
onDataReturnSetRowsis 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.
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.