tl;dr: Use the %globals_get_result_[asset_id]_result_page% keyword and modifiers to display different results depending on the current page of results being displayed, using either different CSS classes or adding/removing HTML comments around content.
Background
First, a bit of background: I had the challenge of implementing a design of an news item listing with a different format/style for the first 2 items on the first page, and then another for the rest.
Basically, the first 2 items on the first page would display a thumbnail image floated to the left of the summary text, underneath the date and title, and span the full ‘row’ or 12 columns (I’m using Foundation on this site). The rest (3 more items on the first page, and then 9 per page after that) would only have the date, title and summary text, and span 4 columns each (one third each).
Below is a simple diagram of how the items should be displayed.
Page 1|date 1|
|title |
img summary
|date 2|
|title |
img summary
|date 3| |date 4| |date 5|
|title | |title | |title |
|summary | |summary | |summary |
Page 2, etc
|date 1| |date 2| |date 3|
|title | |title | |title |
|summary | |summary | |summary |
|date 4| |date 5| |date 6|
|title | |title | |title |
|summary | |summary | |summary |
|date 7| |date 8| |date 9|
|title | |title | |title |
|summary | |summary | |summary |
Column Layouts / Position Formats
Initially I looked at the possibility of using the column layouts screen and divs, but it will use this format for each page of results. Also, simply using position formats has the same issue of applying the format to the item in that position on each page of results.
Result Page GET Variable
The way I got around this was to make use of the GET query string variable that Matrix uses to retrieve different pages of results.
It will be in the format:
http://www.website.com/listing?result_[asset_id]_result_page=[pg]
where the [asset_id] is the Asset ID of the Asset Listing Page asset (not the page it is nested on) and [pg] is the page number.
This can be accessed via the global keyword replacement:
%globals_get_result_[asset_id]_result_page%
Again, replacing the asset ID (and removing the square brackets of course).
CSS Classes on different pages
Now the trick here is to combine this keyword with modifiers to decide what HTML to display. In this case, checking if the value of the keyword is greater than 1 (i.e. not the first page).
For instance, the div surround each item would either have the classes 'large-12 columns' or 'large-4 columns' to span 12 or 4 columns respectively.
So you would use something similar to the following to use 12 columns on the first page and 4 on any other page:
<div class="%globals_get_result_1234_result_page^gt:1:large-4:large-12% columns"> [content] </div>
HTML Comment tags to show/hide content on different pages
If there is any content that should only appear on the first page (such as the thumbnails for the first 2 items), then you use the same keyword multiple times to add HTML comment tags where the keyword is greater than 1:
%globals_get_result_1234_result_page^gt:1:<!--:%%asset_thumbnail%%globals_get_result_1234_result_page^gt:1:-->:%
Keep in mind that it will still print the HTML and just comment it out, so be careful if there's anything you don't want to expose.
It would be nice if we could just use the ^replace_keywords modifier, but unfortunately that doesn't seem to work properly on global keywords like this one (something to do with when it replaces the keywords).
Dynamic Number of Assets Per Page
I also used this keyword in the Assets Per Page field on the details screen of the asset listing to dynamically set the number of items displayed on each page (5 for the first, 9 for any others):
%globals_get_result_1234_result_page^gt:1:9:5%
Combining with Position Formats
Then, you can combine these with position formats to print things where you want them, depending on the page being displayed. As an example, I had to print a closing and starting div tag to start a new 'row' for the grid layout I'm using, so I put these in the Position 4 and 7 Formats (first items on a row in a 3 x 3 grid layout):
%globals_get_result_1234_result_page^gt:1::<!--%</div> <div class="row">%globals_get_result_1234_result_page^gt:1::-->% <div class="large-4 columns left"> [content] </div>
With the same .row class div wrapped around the asset_listing keyword in the Page Contents:
<div class="row"> %asset_listing% </div>
Phew! Made it to the end! ^_^
Note: I haven't tried this with using AJAX to load more results, but I'm guessing as long as you're passing a usable GET/POST variable with the request, it should be fine.
Enjoy!
-iain