Question

Okay, So I will get a little more specific (since my last question).

Basically, I have a pagination page – and there are three display categories BUT only 50 items display per pagination page. So, you could get all of a single category taking up a page, or a combination of different categories – but they can’t exceed 50 items per page. Once a new category is reached, a header displays, then the associated items. I am having trouble figuring out the math to append to the ajax call to request each of the categories. For example, lets say you search for linen. And lets say you get back a total of 329 matches spread across the three categories as shown below. Now, I will be handed back some data so I will know certain things up front even though I will only query 50 items at a time.

A. Search for linen :

Base data

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

so, on page 1 you would see:

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

B. User clicks “next”
(since we are still in the category 1 threshold), we’d get the second set of 50.

Page 2:

CATEGORY 1 HEADER
List of next 50 items

C. USER clicks “next”
(we broke category 1 total, so now we reach into category 2).

Page 3:

CATEGORY 1 HEADER
List of 11 items

CATEGORY 2 HEADER
List of 39 category 2 items

etc..

The issue I am having, that without doing a ton of if/else/||/&& etc.. is there a nifty algorithm that will give me ranges so on the “next” page click I can have ajax params request ranged for the backend.

ie.. so for the third next page click – (has both category1 and category 2, as shown above).
In a perfect world my Ajax would fire two calls, one for category1 and one for category 2, like so. Of course, if the list of 50 spanned all three cats in full, then three calls would be made.

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

something like that. So I know I want 11 items from first ajax call with the start of 101. The backend, I assume, will know the range is 101-111 etc..

I hope I am succinct enough here to supply my needs. The solution seems very mathish.

I was working along the lines of, just penciling things…

(category1 – (max x (currPage – 1)) / max >= 1 –> request 50 category 1 if true;

(category1 – (max x (currPage – 1)) / max < 1 –> request the Modulus amount and then start into category2

We use jquery.

Answer 1

One solution is available at http://jsfiddle.net/CrossEye/eKApZ/.

The basic idea is this:

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;
}());

You could then create a pagination function like this:

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

And call it for, say, page 3, with page size 50, like this:

catRangesForPage(3, 50)

to get a result that looks like this:

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

which you could clearly use to generate your AJAX calls.

If you wanted to, it would be trivial to move the pageSize parameter into the initial call. That’s less flexible, but might be slightly easier to use. To change this, just move the pageSize parameter from this line:

        var result = function(pageNbr, pageSize) {

to this one:

    var ranges = function(itemCounts) {

(It should probably be the first parameter here, as it might get lost in the shuffle if you pass an object literal for itemCounts the way my sample does.)

The other thing to note is that the function returns a signal object named OUT_OF_BOUNDS to let you know you’ve tried to access a page out of range. That object is namespaced to both the generator function and the function it returns, whichever you find more convenient.

This has not been tested outside the bounds of your initial problem, and I wouldn’t be terribly surprised to find boundary issues somewhere with it.

(This does use jQuery, but only for its map utility function. You could use any decent map implementation, including the native one in recent browsers.)

Best of luck!