Question

我正在尝试创建自己的分页插件，我遇到了一个问题：slice（）返回零结果。不知道为什么会发生这种情况，因为第一组结果很好。你能帮忙吗？

这是HTML：

<table class="pagination">
    <thead>
        <tr>
            <td>ID</td>
            <td>First name</td>
            <td>Last name</td>
            <td>Age</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Smith</td>
            <td>24</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mike</td>
            <td>Lee</td>
            <td>22</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Matthew</td>
            <td>McGyver</td>
            <td>32</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Lucas</td>
            <td>Pereira</td>
            <td>17</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Miltiades</td>
            <td>Rochester</td>
            <td>52</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Horace</td>
            <td>Evans</td>
            <td>64</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Anthony</td>
            <td>Briggs</td>
            <td>28</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Raymond</td>
            <td>Mercer</td>
            <td>34</td>
        </tr>
        <tr>
            <td>9</td>
            <td>Richard</td>
            <td>Tex-Tex</td>
            <td>32</td>
        </tr>
        <tr>
            <td>10</td>
            <td>Ryu</td>
            <td>Hayabusa</td>
            <td>27</td>
        </tr>
        <tr>
            <td>11</td>
            <td>Zacariah</td>
            <td>Beckett</td>
            <td>20</td>
        </tr>
        <tr>
            <td>12</td>
            <td>Jerome</td>
            <td>Coles</td>
            <td>29</td>
        </tr>
        <tr>
            <td>13</td>
            <td>Mark</td>
            <td>Smith</td>
            <td>43</td>
        </tr>
        <tr>
            <td>14</td>
            <td>Robert</td>
            <td>Pershing</td>
            <td>44</td>
        </tr>
    </tbody>
</table>

这是JavaScript（使用jQuery 1.10.1）：

(function ($) {
    $.fn.pager = function (params) {
        var settings = $.extend({
            table: $(this).find("tbody"),
            pageSize: 5,
            currentPage: 0,
            totalPages: 0
        }, params);

        // Calculate total pages
        settings.totalPages = Math.round($(this).find("tbody tr").size() / settings.pageSize);

        var bar = $("<div></div>");
        var firstPage = $("<a href=\"#\">&lt;&lt;</a>");
        $(firstPage).on("click", function (event) {
            settings.currentPage = 0;
            drawWindow(settings);
            $(firstPage).attr('disabled', true);
            $(previousPage).attr('disabled', true);

            return false;
        });

        var previousPage = $("<a href=\"#\">&lt;</a>");
        $(previousPage).on("click", function (event) {
            if (settings.currentPage > 0) {
                settings.currentPage--;
            } else {
                $(firstPage).attr('disabled', true);
                $(previousPage).attr('disabled', true);
            }

            drawWindow(settings);

            return false;
        });

        var nextPage = $("<a href=\"#\">&gt;</a>");
        $(nextPage).on("click", function (event) {
            if (settings.currentPage < (settings.totalPages - 1)) {
                settings.currentPage++;
            } else {
                $(firstPage).attr('disabled', false);
                $(previousPage).attr('disabled', false);
                $(nextPage).attr('disabled', true);
                $(lastPage).attr('disabled', true);
            }

            drawWindow(settings);

            return false;
        });

        var lastPage = $("<a href=\"#\">&gt;&gt;</a>");
        $(lastPage).on("click", function (event) {
            settings.currentPage = settings.totalPages - 1;

            $(firstPage).attr('disabled', false);
            $(previousPage).attr('disabled', false);
            $(nextPage).attr('disabled', true);
            $(lastPage).attr('disabled', true);

            drawWindow(settings);

            return false;
        });

        $(bar).append(firstPage);
        $(bar).append(previousPage);
        $(bar).append(nextPage);
        $(bar).append(lastPage);
        $(this).append(bar);

        drawWindow(settings);
        $(firstPage).attr('disabled', true);
        $(previousPage).attr('disabled', true);
    };

    function drawWindow(settings) {
        var window = settings.pageSize;
        var start = settings.currentPage * window;

        alert("Start " + start);
        // To do: Why zero when start is 5 and window is 5?
        alert("Records " + settings.table.find("tr").slice(start, window).size());
        // Show only required results
        $(settings.table.find("tr")).not($(settings.table.find("tr")).slice(start, window)).hide();
    }
}(jQuery));

$(".pagination").pager();

谢谢！

Answer 1

我注意到了一些事情。

首先，我认为您设置settings.currentPage的计算错误。最初currentPage是0。如果您点击箭头上的一次来浏览数据集，currentPage为2，而不是1。

其次，这是您的代码在“第二个”页面上尝试执行的操作。

settings.table.find("tr").slice(10, 5)

这将不会返回任何内容，因为您尝试从10开始并返回到5，并且切片不能像那样工作。因此，请确定需要更改的变量才能使其正常工作。

最后，将变量分配给window，即使它是一个局部变量，也是最不稳定的，你需要摆脱这样做的习惯。

希望这有帮助。

使用jquery进行分页 - 切片不返回任何结果

1 个答案: