Combining AJAX With dataTable Paging

1. Combining AJAX With dataTable Paging You may want to combine AJAX with dataTable paging functionality, to make your pages faster and more user-friendly.

2. Optional Topic – Create AJAX dataTable Paging Functionality  You may have noticed that the JSF pager controls invoke your EGL JSFHandler through a Form/Submit. This may be okay for some functionality, but you also might want: 1. A better (AJAX-matized) user experience, and 2. more programmatic control over your paging. Let’s try creating our own AJAX-controls paging for a dataTable, and see if you think this approach has merit. Here’s what we’re going to build (at run-time). The AJAX techniques we’ll use have already been covered in this Unit, so this should be fairly simple and straightforward to put together.

3.  Create AJAX dataTable Paging Functionality – 1 of 6 Create a new page, named (exactly): ajaxPaging.jsp Edit the EGL Page Code, and from the Notes section of the slide copy the code you see here  over the boiler-plate Read the comments in the code. Note the following: • firstRow will be used to control which row the dataTable starts displaying from in the EGL dynamic array • pagingSize is set to 8 – but it could be user-specified (!) We leave this up to consider as an Optional /Advanced workshop.  • Fwd/bkwdDisable are boolean variables used to control the button click options for paging

4.  Create AJAX dataTable Paging Functionality – 2 of 6 From Page Designer: • Change the boiler-plate page heading text • Add a JSF Panel - Group (type Group) to the page • (From Page Data) Drag the customers array into the Panel Group box • Select output (read/only) fields and the some sub-set of the columns as fields in the dataTable • Add another Panel Group (type Group) to the page • (From Page Data) Select both forwarding functions under the Actions folder, and drag them into the 2nd Panel Group • Add a JSF Input – Hidden control to the page • Optional – Select each of the submit buttons, and from their – Display options properties, select  Image and browse for their Normal image to find a graphic for each. Example: images/next.jpg and images/prev.jpg Customers array as a dataTable JSF Panel Group group1 JSF Panel Group group2 Functions as submit buttons – with images Hidden Input Control

5.  Create AJAX dataTable Paging Functionality – 3 of 6 For each of the Panel Groups: • Select the Panel Group, and from Properties -Ajax • Specify:  Allow Ajax updates  Submit

6.  Create AJAX dataTable Paging Functionality – 4 of 6 For each of the Submit Buttons: • Select the button, and from Quick Edit/onclick event, specify: • Use pre-defined behavior Action: Multiple actions (see screen capture below) An additional JavaScript statement to value the hidden input field according to which button is clicked: document.getElementById("form1:hidden1").value = 'fwd';

7.  Create AJAX dataTable Paging Functionality – 5 of 6 Also (for each of the Submit Buttons): • Select the button, and from Properties/All Attributes specify: • The disabled Attribute • Value: • Compute • Bind it to the appropriate EGL boolean variable

8.  Create AJAX dataTable Paging Functionality – 6 of 6 For the dataTable - Select the entire dataTable, and from Properties/All Attributes: • Give the dataTable a border: 1 • Delete the columnClasses value • Bind first to the EGL variable: firstRow • Bind rows to the EGL variable: pagingSize • Run the page on the server