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

【问题标题】：pagination depending on window size - approach to find number of items per page分页取决于窗口大小 - 查找每页项目数的方法
【发布时间】：2016-02-22 22:50:45
【问题描述】：

抱歉拖了这么久，非常感谢您平时的时间和指导。

我有一个未知尺寸的 div；事实上，它的宽度和高度是使用百分比设置的，因此以像素为单位的最终值取决于窗口innerWidth 和innerHeight 属性。

我需要在该 div 中创建一个 ajax 分页。换句话说，我有两个孩子div s（下图）。第二个是用于分页链接。第一个负责持有物品（水平和垂直对齐）。它将（自动）具有未知宽度。因此，里面的项目数量取决于它的最终宽度和高度，因为所有项目都有一个固定的已知宽度和高度（比如说 80 像素宽度和 50 像素高度）。

我希望下图能以最好的方式说明我的问题：

目标是找到找到 X 和 Y 值的好方法。

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

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

我打算做什么：

创建一个 javascript 函数 calculate_viewport()，使其在解析/执行任何其他内容之前首先执行。
创建一个 javascript 函数，该函数根据 calculate_viewport() 返回的值计算 X 和 Y 值。

将 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>

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

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

【问题讨论】：

标签： javascript jquery css ajax adaptive-design

【解决方案1】：

您永远无法靠自己的方式正确计算布局。我的建议是事先布置好所有项目（弹性框在这里是理想的！），获取计数，然后使用 ajax 填充它们。

Here's a quick demo我激动了。实际的 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;，以便用户在它们准备好之前看不到它们。

【讨论】：

感谢您的宝贵时间。如果我理解你的话，你建议使用你提供的 js 将可见性设置为隐藏的最大初始数量，然后使用下一页的计数来仅请求每页中必要数量的项目。正确的？关于 flexbox 的说明，它在 IE8 和 9 中不受支持，并且仅部分支持 10 和 11，这对我来说是一个障碍。 display:table+ table-layout:fixed 有更好的浏览器支持（供参考）
@whitelettersinblankpapers 是的！无论如何，这将是我的方法。不过，这个问题对我来说很有趣，因为如果用户调整了他们的窗口大小，布局会很快中断——在你的情况下，我通常会选择固定项目布局。你可以在 ie8 和 9 中使用 flebox，你只需要使用 polyfill
我将使用您的答案（感谢我在阅读有关它的指南后对 flexbox 的迷恋，当然我将使用 polyfill）。关于调整大小，我暂时没有在我的项目中考虑它，但是当我将来达到这一步时，我将在这里发送评论以分享我的想法。非常感谢，祝您有愉快的一天