javascript - Ajax 请求、页面和代码来计算差异的数据范围。猫

Question

好的，所以我会更具体一些(自从我上一个问题以来)。

基本上，我有一个分页页面 - 有 3 个显示类别，但每个分页页面仅显示 50 个项目。因此，您可以获取占据一页的所有单个类别，或不同类别的组合 - 但每页不能超过 50 个项目。一旦到达新类别，就会显示标题，然后显示关联的项目。我无法计算出附加到 ajax 调用以请求每个类别的数学。例如，假设您搜索亚麻。假设您总共返回了 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

等等..

我遇到的问题是，无需执行大量 if/else/||/&& 等操作。是否有一个漂亮的算法可以为我提供范围，以便在“下一页”上单击我可以发出 ajax params 请求范围为后端。

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

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

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

我希望我在这里能够足够简洁地满足我的需求。这个解决方案看起来非常数学。

我的工作方式是，只是用铅笔画东西......

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

(category1 - (max x (currPage - 1))/max < 1 --> 请求模数，然后开始进入类别2

我们使用jquery。

Answer 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 实现，包括最新浏览器中的 native 实现。)

祝你好运!