没有插件的Jquery分页创建

Question

您好，我正在利用 jquery 为演示 html 表创建分页。这个想法不是使用任何插件，而是为了提高我在 jquery 编写逻辑方面的技能以完成工作。

说下面是html结构：

 <div>
    <input type='hidden' id='current_page' />
    <input type='hidden' id='show_per_page' />
    <div id='page_navigation'>
    </div>
    <table id="paginate" id="table1" border="1">
        <tr>
            <td>
                1
            </td>
            <td>
                2
            </td>
            <td>
                3
            </td>
        </tr>
        <tr>
            <td>
                One
            </td>
            <td>
                Two
            </td>
            <td>
                Three
            </td>
        </tr>
        <tr>
            <td>
                4
            </td>
            <td>
                5
            </td>
            <td>
                6
            </td>
        </tr>
        <tr>
            <td>
                7
            </td>
            <td>
                8
            </td>
            <td>
                9
            </td>
        </tr>
        <tr>
            <td>
                40
            </td>
            <td>
                50
            </td>
            <td>
                60
            </td>
        </tr>
        <tr>
            <td>
                4000
            </td>
            <td>
                5000
            </td>
            <td>
                6000
            </td>
        </tr>
        <tr>
            <td>
                42
            </td>
            <td>
                52
            </td>
            <td>
                62
            </td>
        </tr>
    </table>
</div>

请注意，我为当前页面和每页项目计数采用了两个隐藏变量。现在我编写的 jquery 到目前为止。

 $(document).ready(function () {


                    debugger;
                    var show_per_page = 3;
                    var number_of_items = $('#paginate tr').size();
                    var number_of_pages = Math.ceil(number_of_items / show_per_page);
                    $('#current_page').val(1);
                    $('#show_per_page').val(show_per_page);
                    var navigation_html = '<a class="previous_link" href="javascript:callPrev();">Prev</a>' + '&nbsp';
                    var current_link = 1;
                    while (number_of_pages > current_link) {
                        navigation_html += '<a class=page_link" href="javacsript:showPage(' + current_link + ')" longdesc="' + current_link + '">' + (current_link + 1) + '</a>' + '&nbsp';
                        current_link++;
                    }
                    navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';
                    $('#page_navigation').html(navigation_html);
                    $('#paginate tr').css('display', 'none');
                    for (var i = 0; i < show_per_page; i++) {
                        $('#paginate tr').eq(i).css('display', 'block');
                    }


    });

它正在工作并创建了分页栏。但是现在我不知如何处理 next() 和 callPrev() 这两个函数，因为我必须为其编写定义。

我正在学习 jquery，请多多包涵。 谢谢。

Answer 1

试试这个：

next = function () {
   new_page = parseInt($('#current_page').val()) + 1;
   showPage(new_page);
}

previous = function () {
   new_page = parseInt($('#current_page').val()) - 1;
   $('#current_page').val(new_page);
   showPage(new_page);
}

演示：

http://jsfiddle.net/3qu7u4ej/1/