Multiple page navigation within CFlayout Tab

I have a page has 3 tabs that displays results populate from the form user fills in. It works fine except when records getting too many to be displayed in a single page, so I would like to add paging to each tab. It sounds pretty straight forward. But when I tried to use url link for navigation of Previous and Next page, I could not keep the page within each tab. It navigate out of the main container page where I have the cflayout–cflayoutarea. I could not figure out how to keep it stays in the tab.
Could any one tell me is there a way to keep the paging within its tab page?
Does anyone have similar experience? Please help.

Thanks in advance!

<cflayout type=“tab”>
<cflayoutarea title=“cat1” source=“cat1.cfm” refreshOnActivate=“true” />
<cflayoutarea title=“cat2” source=“cat2.cfm” refreshOnActivate=“true” />
<cflayoutarea title=“cat3” source=“cat3.cfm” refreshOnActivate=“true” />
</cflayout>

I did it by using divs within a tab(layoutarea) and javascript to show/hide the divs. This works fine with relatively small data, but if your lists are very long and/or contains images it may take a while to load.
Another variation of this would be to use a div to house all links and manage scrolling properties so the height/width of the div doesn’t change but the scroll is activated if needed.

You could also incorporate next-n-records logic with bind/ajax so it shows 10 records at a time. Ben Forta has a good example of this in volume 2 of his cf8 book. You can provide a prev or next button or a reference like 1-10, 11-20, 21-etc…

IF you want to do some ugly coding - tabs within a cflayoutarea may be possible. So in Tab1 you might have link lists a-e, f-m, n-s, t-z as sub-tabs.


cflayout type=tab
  cflayoutarea title=tab1
     cflayout type=tab
         cflayoutarea title=a-e
         cflayoutarea title=f-m
         etc...
    /cflayout
 /cflayoutarea
  /cflayout