对不起,很抱歉,非常感谢您平时的时间和指导。
我有一个未知尺寸的 div;实际上,它的宽度和高度是使用百分比设置的,因此以像素为单位的最终值取决于窗口innerWidth
的innerHeight
属性。
我需要在该 div 中创建一个 ajax 分页。换句话说,我有两个孩子div
(下图)。第二个是用于分页链接。第一个负责持有物品(水平和垂直对齐)。它将(自动)具有未知宽度。因此,里面的项目数量取决于它的最终宽度和高度,因为所有项目都有一个固定的已知宽度和高度(比如说 80 像素宽度和 50 像素高度)。
目标是找到找到 X 和 Y 值的好方法。
- X= 每行的项目数
- Y= 每列的项目数
这两个值将有助于查找每页的项目数(用于服务器端进行分页)。将通过将总页数除以该值来创建分页链接。注意:一切都是用 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>
以进行早期窗口大小计算?
注意:对于服务器端部分,我设法通过我正在使用的 ORM 库提供的一些功能对结果进行分页。我使用一个服务器端模板引擎,它将项目页面呈现为 HTML。我准备根据要求提供这部分的任何代码。谢谢