Answers.Body: <p>Well after a brain melting, I have come up with an answer, im not sure how pretty it is, any comments on how to tidy it up are most welcome.</p>
  <pre><code>&lt;!-- get the premium entries and randomize --&gt;
  {% set premEntries = craft.entries.section(&quot;test&quot;).relatedTo(category).Premium('yes').orderBy('RAND()').ids() %}
  
  &lt;!-- get the standard entries and randomize --&gt;
  {% set standEntries = craft.entries.section(&quot;test&quot;).relatedTo(category).Premium('no').orderBy('RAND()').ids() %}
  
  &lt;!-- get the total number of premium entries --&gt;
  {% set premCount = craft.entries.section(&quot;test&quot;).relatedTo(category).Premium('yes').orderBy('RAND()').count() %}
  
  &lt;!-- Divide total premium entries by Pagination per page limit --&gt;
  {% set limitTotal = premCount / 12 %}
  
  &lt;!-- Round up the linitTotal, this gives me page the premium entries finish on --&gt;
  {% set limitRoundUp = ceil(limitTotal) %}
  
  &lt;1-- This gives me the number of premium entries on the last page they appear --&gt;
  {% set limitRoundDown = floor(limitTotal) %}
  {% set lim3 = limitRoundDown * 12 %}
  {% set lim4 = premCount - lim3 %}
  
  
  &lt;!-- This merges the 2 sets of entries together into the paginated results --&gt;
  {% set allEntries = standEntries |merge(premEntries) %}
  {% set posts = craft.entries.id( allEntries ) %}
  {% paginate posts.limit(12).orderby('Premium desc') as pageInfo, pageEntries %}     
  {% set pageCount = pageInfo.totalPages %}
  
  
  &lt;!--  This turns the grey background white on page 2 and beyond if there are less that 12 premium entries --&gt;
      &lt;div class=&quot;container-fluid greyouter {% if premCount &lt;= 12 %}whiteouter{% endif %}&quot;&gt;       
          &lt;div class=&quot;container&quot;&gt;
                  &lt;div class=&quot;row&quot;&gt;
              
                  {% for entry in pageEntries %}
                  
                  
      &lt;!-- this is the styling for the above, must be inside the FOR statement to be able to register the current page --&gt;    
  
      
                      {% if pageInfo.currentPage != '1' %}
                          &lt;style&gt;
                              .whiteouter {
                                  background-color: #fff;
                                          }
                          &lt;/style&gt;
                      {% endif %}
                      
                      
      &lt;!-- this is the styling for if page 1 has no premium entries, it changes the background to white, must be inside the FOR statement to be able to register the current page --&gt; 
      
      
          {% if pageInfo.currentPage == '1' and premCount == '0' %}
              &lt;style&gt;
                  .greyouter              {
                  background-color: #fff;
                          }
          &lt;/style&gt;
          {% endif %}
      &lt;div class=&quot;col-lg-4 pb-5&quot;&gt; 
                  
          &lt;div class=&quot;vendorboximg&quot;&gt;
              
          &lt;/div&gt;
          
          
      &lt;/div&gt;  
  
  
  &lt;!--  This checks to see if this page is where the premium entries stop, and if this loop is the last premium, if so it adds a new row, no CSS required as backgorund is white anyway --&gt;
  
      {% if pageInfo.currentPage == limitRoundUp and loop.index == lim4 %}
       &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;container-fluid pt-5&quot;&gt;&lt;div class=&quot;container&quot;&gt;&lt;div class=&quot;row&quot;&gt;{% endif %}
  
  
  {% endfor %}
  &lt;!-- Pagination numbers --&gt;
  &lt;div style=&quot;width:100%&quot;&gt;
      {% include 'includes/_sect-pagination' %}
    &lt;/div&gt;              
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-01-22T00:55:18.760Z
Answers.LastActivityDate: 2021-01-22T00:55:18.760Z
Answers.UserDisplayName: springboynick
Body: <pre><code>{% set query = craft.entries.businessAddress(params).orderBy('Premium desc, distance').limit(12) %}
  
  {% paginate query as pageInfo, pageEntries %}
  
  &lt;div class=&quot;row&quot;&gt;
          
      {% for entry in pageEntries %}
  
          &lt;div class=&quot;col-lg-4&quot;&gt;  
  
              &lt;div class=&quot;DETAILS   {% if premium == 'yes' %}  {% endif %}&quot;&gt; 
              &lt;!--- DETAILS --&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      {% endfor %}
  
  {% include 'includes/_sect-pagination' %}
  
  &lt;/div&gt;
  </code></pre>
  <p>I have the above code, which outputs paginated results of a section ordered by whether they are a STANDARD or PREMIUM entry, then by a distance calculation.
  Within the entry output an IF statement adds more CSS to the output depending if STANDARD or PREMIUM, all of this works fine, however, id like to add more CSS to the results.</p>
  <p>I would like to have the PREMIUM entries output in a separate ROW to the STANDARD entries so the ROWS can have different CSS applied, but still remain part of the total pagnination.</p>
  <p>For example, if there are 3 premium and 14 standard,</p>
  <p>The first page would be:-</p>
  <pre><code>&lt;div class=&quot;row premiumrow&quot;&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;PREM ENTRY 1&lt;/div&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;PREM ENTRY 2&lt;/div&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;PREM ENTRY 3&lt;/div&gt;
  </code></pre>
  
  <pre><code>&lt;div class=&quot;row standardrow&quot;&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;STANDARD ENTRY 1&lt;/div&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;STANDARD ENTRY 2&lt;/div&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;STANDARD ENTRY 3&lt;/div&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;STANDARD ENTRY 4&lt;/div&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;STANDARD ENTRY 5&lt;/div&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;STANDARD ENTRY 6&lt;/div&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;STANDARD ENTRY 7&lt;/div&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;STANDARD ENTRY 8&lt;/div&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;STANDARD ENTRY 9&lt;/div&gt;
  </code></pre>
  
  <p>Second page would be:-</p>
  <pre><code>&lt;div class=&quot;row standardrow&quot;&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;STANDARD ENTRY 1&lt;/div&gt;
  &lt;did class=&quot;col-lg-4&quot;&gt;STANDARD ENTRY 2&lt;/div&gt;
  </code></pre>
  
  <p>Can anyone say if that is possible within paginated results, if so how?</p>
  <p>Any help would be greatly appreciated.</p>
  
Tags: <craft3><pagination><css>
Title: Multiple Queries with differing CSS in Paginated output
ThreadText: # Multiple Queries with differing CSS in Paginated output
  
  (Asked by: username_0 on 2021-01-21)
  
  ```
  {% set query = craft.entries.businessAddress(params).orderBy('Premium desc, distance').limit(12) %}
  
  {% paginate query as pageInfo, pageEntries %}
  
  <div class="row">
          
      {% for entry in pageEntries %}
  
          <div class="col-lg-4">  
  
              <div class="DETAILS   {% if premium == 'yes' %}  {% endif %}"> 
              <!--- DETAILS -->
              </div>
  
          </div>
  
      {% endfor %}
  
  {% include 'includes/_sect-pagination' %}
  
  </div>
  
  ```
  
  I have the above code, which outputs paginated results of a section ordered by whether they are a STANDARD or PREMIUM entry, then by a distance calculation.
  Within the entry output an IF statement adds more CSS to the output depending if STANDARD or PREMIUM, all of this works fine, however, id like to add more CSS to the results.
  
  I would like to have the PREMIUM entries output in a separate ROW to the STANDARD entries so the ROWS can have different CSS applied, but still remain part of the total pagnination.
  
  For example, if there are 3 premium and 14 standard,
  
  The first page would be:-
  
  ```
  <div class="row premiumrow">
  <did class="col-lg-4">PREM ENTRY 1</div>
  <did class="col-lg-4">PREM ENTRY 2</div>
  <did class="col-lg-4">PREM ENTRY 3</div>
  
  ```
  
  ```
  <div class="row standardrow">
  <did class="col-lg-4">STANDARD ENTRY 1</div>
  <did class="col-lg-4">STANDARD ENTRY 2</div>
  <did class="col-lg-4">STANDARD ENTRY 3</div>
  <did class="col-lg-4">STANDARD ENTRY 4</div>
  <did class="col-lg-4">STANDARD ENTRY 5</div>
  <did class="col-lg-4">STANDARD ENTRY 6</div>
  <did class="col-lg-4">STANDARD ENTRY 7</div>
  <did class="col-lg-4">STANDARD ENTRY 8</div>
  <did class="col-lg-4">STANDARD ENTRY 9</div>
  
  ```
  
  Second page would be:-
  
  ```
  <div class="row standardrow">
  <did class="col-lg-4">STANDARD ENTRY 1</div>
  <did class="col-lg-4">STANDARD ENTRY 2</div>
  
  ```
  
  Can anyone say if that is possible within paginated results, if so how?
  
  Any help would be greatly appreciated.
  
  **Tags:** craft3, pagination, css
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2021-01-22. Score: 1 | Accepted answer
  
  Well after a brain melting, I have come up with an answer, im not sure how pretty it is, any comments on how to tidy it up are most welcome.
  
  ```
  <!-- get the premium entries and randomize -->
  {% set premEntries = craft.entries.section("test").relatedTo(category).Premium('yes').orderBy('RAND()').ids() %}
  
  <!-- get the standard entries and randomize -->
  {% set standEntries = craft.entries.section("test").relatedTo(category).Premium('no').orderBy('RAND()').ids() %}
  
  <!-- get the total number of premium entries -->
  {% set premCount = craft.entries.section("test").relatedTo(category).Premium('yes').orderBy('RAND()').count() %}
  
  <!-- Divide total premium entries by Pagination per page limit -->
  {% set limitTotal = premCount / 12 %}
  
  <!-- Round up the linitTotal, this gives me page the premium entries finish on -->
  {% set limitRoundUp = ceil(limitTotal) %}
  
  <1-- This gives me the number of premium entries on the last page they appear -->
  {% set limitRoundDown = floor(limitTotal) %}
  {% set lim3 = limitRoundDown * 12 %}
  {% set lim4 = premCount - lim3 %}
  
  <!-- This merges the 2 sets of entries together into the paginated results -->
  {% set allEntries = standEntries |merge(premEntries) %}
  {% set posts = craft.entries.id( allEntries ) %}
  {% paginate posts.limit(12).orderby('Premium desc') as pageInfo, pageEntries %}     
  {% set pageCount = pageInfo.totalPages %}
  
  <!--  This turns the grey background white on page 2 and beyond if there are less that 12 premium entries -->
      <div class="container-fluid greyouter {% if premCount <= 12 %}whiteouter{% endif %}">       
          <div class="container">
                  <div class="row">
              
                  {% for entry in pageEntries %}
                  
                  
      <!-- this is the styling for the above, must be inside the FOR statement to be able to register the current page -->    
  
      
                      {% if pageInfo.currentPage != '1' %}
                          <style>
                              .whiteouter {
                                  background-color: #fff;
                                          }
                          </style>
                      {% endif %}
                      
                      
      <!-- this is the styling for if page 1 has no premium entries, it changes the background to white, must be inside the FOR statement to be able to register the current page --> 
      
      
          {% if pageInfo.currentPage == '1' and premCount == '0' %}
              <style>
                  .greyouter              {
                  background-color: #fff;
                          }
          </style>
          {% endif %}
      <div class="col-lg-4 pb-5"> 
                  
          <div class="vendorboximg">
              
          </div>
          
          
      </div>  
  
  <!--  This checks to see if this page is where the premium entries stop, and if this loop is the last premium, if so it adds a new row, no CSS required as backgorund is white anyway -->
  
      {% if pageInfo.currentPage == limitRoundUp and loop.index == lim4 %}
       </div></div></div><div class="container-fluid pt-5"><div class="container"><div class="row">{% endif %}
  
  {% endfor %}
  <!-- Pagination numbers -->
  <div style="width:100%">
      {% include 'includes/_sect-pagination' %}
    </div>              
  
  ```
  
  
  ---
  
  