Pagination based on window size - approach to finding the number of elements per page

Question

Pagination based on window size - approach to finding the number of elements per page

I apologize for being a long time, and thank you very much for your usual time and guidance.

I have a div of unknown sizes; in fact, its width and height are set using percentages, so the final values in pixels depend on the properties of window innerWidtha innerHeight.

I need to create ajax pagination inside this div. In other words, I have two children div(figure below). The second is for page links. The first is responsible for storing elements (aligned horizontally and vertically). It will be (automatically) of unknown width. As a result, the number of elements inside depends on their final width and height, because all elements have a fixed known width and height (suppose a width of 80 pixels and a height of 50 pixels).

Hope the following figure illustrates my problem in the best way:

The goal is to find a good approach for finding the values of X and Y.

X = number of items per row
Y = number of items in a column

( ). . . ajax.

:

javascript calculate_viewport(), , , /.
javascript, X Y , calculate_viewport().

X Y ajax, .

<script type="text/javascript">

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()); </script>

<!DOCTYPE html> <html>
    <head>
    </head>
    <body>
        <div id="parent" style="height: 70%; width: 50%">
            <div id="items_container" style="height: calc(100% - 30px); width: 100%"></div>
            <div id="pagination" style="height: 30px; width: 100%">></div>
        </div>
    </body>
    <script src="jquery.js"></script>
    <script type="text/javascript">
            $('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;
        });
    </script> </html>

? ? <script> <html> ?

N.B: , ORM, . , HTML. .

+4

javascript jquery css ajax adaptive-design

whiteletters in blankpapers 22 . '16 22:50

1

Harangue · Accepted Answer · 2016-02-22T23:09:38+0000

. , ( !), , ajax.

. JS , jQuery.

var MARGIN = 10; //This should match your CSS

var itemContainerHeight = $(".foo").height();
var count = 0;

$(".item").each(function () {
  if ($(this).position().top + $(this).height() + MARGIN > itemContainerHeight) {
    $(this).hide();
  } else {
    count++;
  }
});

$('.pagination').text("I can display "+count+" items!");

- , .position(). , , , , .

. visbility: hidden; , , .

Pagination based on window size - approach to finding the number of elements per page

More articles: