1

如果从控制器中的 JSON 对象填充的项目,我试图为列表设置上一个和下一个按钮。

我有一个skip and take变量,这样我就可以对记录集做同样的事情。我想一次分页前进 7 个(下一个),一次反转 7 个(上一个)。

订单正在正确加载,但我不完全理解跳过的想法,以及在没有更多“页面”要呈现时更改 CSS 类。

        var skip = 0;
    var take = 7;

    function loadItems() {
        $.ajax({
            url: '@Url.Action("GetAllItems")',
            data:
            {
                skip: skip,
                take: take
            },
            type: "GET",
            cache: false,
            success: function (items) {
                $.each(items, function (index, item) {
                    $('#ul-items').append('<li><a class="link">' + item.Information + '</a></li>');
                });
            }
        });
    }

    $(document).ready(function () {
        $('#previous').live("click", function () {
            //page number , # of records needed
            skip(0);
            take(-7);

            if (i) {//execute if there are no previous selections available
                $('#previous').removeClass('enabled').addClass('disabled');
            }
        });

        $('#next').live("click", function () {
            //page number , # of records needed
            skip(1);
            take(7);

            if (i) {//execute if there are no previous selections available
                $('#next').removeClass('enabled').addClass('disabled');
            }
        });
    });
4

2 回答 2

1

Skip允许您很好地跳过列表中的许多项目。并Take在列表中获取下一个项目。

假设您有一个包含 100 个项目的分页列表,并且您一次需要 10 个项目。

最初你取 10 个。第二个链接需要跳过 10 个元素并取接下来的 10 个元素。

所以这就像paginatedList.Skip(i*10).Take(10)我将成为你的页码一样。

因此,如果 i 为 0,则 0*10 将是第 0 页(实际上是第一页,但用户不知道)。 Take 10将返回前 10 个项目。

于 2012-10-01T20:34:10.127 回答
0

您的代码应该更像这样,ypu 不必更改取值,只需跳过:

 $('#previous').live("click", function () {
            if (skip > 0) {
                skip = skip - 1;
            } else {
                $('#previous').removeClass('enabled').addClass('disabled');
            }
            loadItems();
        });

        $('#next').live("click", function () {
            skip = skip + 1;
            loadItems();
            $('#previous').addClass('enabled').removeClass('disabled');
        });
于 2012-10-01T20:44:07.130 回答