1

好的，所以我会更具体一点（自从我上一个问题以来）。

基本上，我有一个分页页面 - 并且有三个显示类别，但每个分页页面只显示 50 个项目。因此，您可以让所有单个类别占据一个页面，或不同类别的组合 - 但每页不能超过 50 个项目。到达新类别后，将显示标题，然后显示相关项目。我无法弄清楚附加到 ajax 调用以请求每个类别的数学。例如，假设您搜索linen。假设您返回了分布在三个类别中的总共 329 场比赛，如下所示。现在，我将收到一些数据，以便我预先知道某些事情，即使我一次只查询 50 个项目。

A. 搜索亚麻：

基础数据

Total Items: 129
Category1 has 111 items
Category2 has 101 items
Category3 has 17 items

因此，在第 1 页上，您会看到：

CATEGORY 1 HEADER
... list of the 50 items ...

B. 用户点击“下一步”（因为我们仍处于类别 1 阈值中），我们将获得第二组 50 个。

第2页：

CATEGORY 1 HEADER
List of next 50 items

C. 用户点击“下一步”（我们总共打破了第 1 类，所以现在我们进入第 2 类）。

第 3 页：

CATEGORY 1 HEADER
List of 11 items

CATEGORY 2 HEADER
List of 39 category 2 items

ETC..

我遇到的问题是，如果不做大量的 if/else/||/&& 等。是否有一个漂亮的算法可以给我范围，所以在“下一页”点击我可以有 ajax 参数请求范围为后端。

即.. 所以对于第三个下一页单击 - （同时具有类别 1 和类别 2，如上所示）。在一个完美的世界中，我的 Ajax 会触发两个调用，一个用于类别 1，一个用于类别 2，就像这样。当然，如果 50 的列表完全涵盖所有三只猫，那么将进行三个调用。

/category1?rows=11&start=101
/category2?rows=39&start=1

类似的东西。所以我知道我想从第一个 ajax 调用中获得 11 个项目，以 101 开头。我假设后端会知道范围是 101-111 等。

我希望我在这里足够简洁以满足我的需求。解决方案似乎非常数学化。

我的工作思路是，只是用铅笔画东西……

(category1 - (max x (currPage - 1)) / max >= 1 --> 如果为真，则请求 50 个类别 1；

(category1 - (max x (currPage - 1)) / max < 1 --> 请求模量然后开始进入category2

我们使用jquery。

4

1 回答 1

1

http://jsfiddle.net/CrossEye/eKApZ/提供了一种解决方案。

基本思想是这样的：

var createCategoryRangesForPage = (function() {
    var ranges = function(itemCounts) {
        var total = 0;
        var indices = [0].concat(jQuery.map(itemCounts, function(item) {
            return total = total + item.count;
        }));
        var result = function(pageNbr, pageSize) {
            var first = pageSize * (pageNbr - 1),
                last = Math.min(first + pageSize, total),
                firstIdx = indices.length - 1,
                lastIdx = indices.length - 1;
            if (first >= total) {return ranges.OUT_OF_BOUNDS;}
            while (indices[firstIdx] > first) {firstIdx--;}
            while (indices[lastIdx] >= last) {lastIdx--;}
            return jQuery.map(new Array(lastIdx - firstIdx + 1), function(item, idx) {
                var index = idx + firstIdx;
                return {
                    name: itemCounts[index].name,
                    start: Math.max(first, indices[index]) - indices[index] + 1,
                    // end: Math.min(last, indices[index + 1]) - indices[index],
                    count: Math.min(last, indices[index + 1]) - Math.max(first, indices[index])
                };
            });
        };
        result.OUT_OF_BOUNDS = ranges.OUT_OF_BOUNDS;
        return result;
    };
    ranges.OUT_OF_BOUNDS = {message: "Out of bounds", toString:function(){return this.message;}};
    return ranges;
}());

然后你可以像这样创建一个分页函数：

var catRangesForPage = createCategoryRangesForPage([
    {name:"CATEGORY 1", count: 111},
    {name:"CATEGORY 2", count: 101},
    {name:"CATEGORY 3", count: 17}
]);

并将其称为第 3 页，页面大小为 50，如下所示：

catRangesForPage(3, 50)

得到如下所示的结果：

[
    {
        "name": "CATEGORY 1",
        "start": 101,
        "count": 11
    },
    {
        "name": "CATEGORY 2",
        "start": 1,
        "count": 39
    }
]

您可以清楚地使用它来生成 AJAX 调用。

如果您愿意，将pageSize参数移动到初始调用中将是微不足道的。这不太灵活，但可能更容易使用。要改变这一点，只需pageSize从这一行移动参数：

        var result = function(pageNbr, pageSize) {

对此：

    var ranges = function(itemCounts) {

（它可能应该是这里的第一个参数，因为如果您itemCounts按照我的示例的方式传递对象文字，它可能会在随机播放中丢失。）

另一件需要注意的是，该函数返回一个名为的信号对象OUT_OF_BOUNDS，让您知道您已尝试访问超出范围的页面。该对象被命名为生成器函数和它返回的函数，无论你觉得哪个更方便。

这尚未在您最初问题的范围之外进行测试，如果在某处发现边界问题，我不会感到非常惊讶。

（这确实使用了 jQuery，但仅用于它的map实用功能。您可以使用任何体面的map实现，包括最近浏览器中的原生实现。）

祝你好运！

于 2012-10-15T02:06:10.103 回答