分页取决于窗口大小 - 每页查找项目数的方法

Question

分页取决于窗口大小 - 每页查找项目数的方法

Adi*_*oui 5 javascript css ajax jquery adaptive-design

很抱歉很久,非常感谢你平常的时间和指导.

我有一个未知的维度; 实际上,它的宽度和高度是使用百分比设置的,因此最终的像素值取决于窗口innerWidth的innerHeight属性.

我需要在div中创建一个ajax分页.换句话说,我有两个孩子div(如下图所示).第二个是分页链接.第一个负责保持物品(水平和垂直对齐).它将(自动)宽度未知.因此,内部物品的数量取决于其最终宽度和高度,因为所有物品都具有固定的已知宽度和高度(假设宽度为80像素,高度为50像素).

我希望下图以最佳方式说明我的问题:

目标是找到一种很好的方法来找到X和Y的值.

X =每行的项目数
Y =每列的项目数

这两个值将有助于查找每页的项目数(用于服务器端的分页).将通过将总页数除以该值来创建分页链接.注意:一切都是用ajax完成的.

我打算做什么:

calculate_viewport()在解析/执行任何其他事物之前,创建一个javascript函数作为第一个执行的函数.
创建一个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>

Run Code Online (Sandbox Code Playgroud)

您如何看待这种方法？还有其他更好的方法来实现这一目标吗？是否可以在<script>标记之前创建标记<html>以进行早期窗口大小计算？

注意:对于服务器端部分,我设法通过我正在使用的ORM库提供的某些功能对结果进行分页.我使用服务器端模板引擎将一个项目页面呈现为HTML.我已准备好根据要求提供此部分的任何代码.谢谢

Answer 1

Jac*_*Guy 2

你永远无法靠自己获得正确的布局数学。我的建议是预先布置所有项目（弹性框在这里是理想的选择！），获取计数，然后使用 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!");

Run Code Online (Sandbox Code Playgroud)

重要的一行是包含.position(). 这将获取每个项目顶部边缘的位置，添加高度以找到其底部边缘，并检查它是否超出项目容器的边界。

之后，您可以使用计数从服务器查询必要的项目。我还建议visbility: hidden;在所有项目上使用，这样用户在准备好之前就不会看到它们。

归档时间：	9 年，9 月前
查看次数：	2669 次
最近记录：	9 年，9 月前