title: pagination depending on window size - approach to find number of items per page
body: <p>Sorry for being long and thank you very much for your usual time and guidance.</p>
  
  <p>I have a div of unknown dimensions; in fact, its width and height are set using percentages so the final values in pixels depend on the window <code>innerWidth</code> an <code>innerHeight</code> properties. </p>
  
  <p>I need to create an ajax pagination inside that div. In other words, I have two child <code>div</code> s (figure below). The second one is for pagination links. The first one is responsible of holding items (aligned horizontally and vertically). It will be (automatically) of unknown width . As a result, the number of items inside depend on its final width and height because all items have a fixed known width and hieght (Let's say 80 pixels width and 50 pixels height). </p>
  
  <p>I hope the following figure is illustrating my issue in the best manner:
  <a href="https://i.stack.imgur.com/fhAe9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fhAe9.png" alt="enter image description here"></a></p>
  
  <p><strong>The goal</strong> is to find a good  approach to find the values of X and Y.</p>
  
  <ul>
  <li>X= number of items per row </li>
  <li>Y= the number of items per column</li>
  </ul>
  
  <p>These two values will help finding the number of items per page (to be used server side for pagination). Pagination links will be created by dividing the total number of pages by this value. Note: Everything is done with ajax.</p>
  
  <p><strong>What I am planning to do:</strong></p>
  
  <ul>
  <li>create a javascript function <code>calculate_viewport()</code> to be the first thing to execute before any other thing parsed/exectued.</li>
  <li>create a javascript function that calculates X and Y values based on values returned by <code>calculate_viewport()</code>.</li>
  <li><p>use the X and Y for an ajax call that request a certain page.</p>
  
  <blockquote>
  <pre><code>&lt;script type="text/javascript"&gt;
  
  function calculate_viewport() {
      var width_and_height_object;
      // calcluate width and height using of current window.innerWidth  and window.innerHeight
      // put values in an object width_and_height_object
      return width_and_height_object; }
  
  function calculate_XandY(width_and_height_object) {
      var XandY_object;
      // calcluate X and Y values by perfoming necessary division operations
      return XandY_object; }
  
  var XandY = calculate_XandY(viewport()); &lt;/script&gt;
  
  &lt;!DOCTYPE html&gt; &lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="parent" style="height: 70%; width: 50%"&gt;
              &lt;div id="items_container" style="height: calc(100% - 30px); width: 100%"&gt;&lt;/div&gt;
              &lt;div id="pagination" style="height: 30px; width: 100%"&gt;&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;script src="jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
              $('a.next a.previous').click(function(e){
                   e.preventDefault();         
                   $.ajax({
                      type: "GET",
                      url: url_to_page_of_items,
                      data: { number_of_items_per_page : X_times_Y },
                      cache: false, 
                      success: callback // append result to items container div 
                   });        
             return false;
          });
      &lt;/script&gt; &lt;/html&gt;
  </code></pre>
  </blockquote></li>
  </ul>
  
  <p>What do you think about this approach? Are there any other better ways to achieve this goal? Is it acceptable to create a <code>&lt;script&gt;</code> tag before the <code>&lt;html&gt;</code> tag just to make early window size calculation?</p>
  
  <p><strong>N.B:</strong> For the server side part, I manage to paginate results via some functions offered by the ORM library I am using. I use a server-side template engine that renders a page of items as HTML. I am ready to provide any code upon request for this part. Thanks</p>