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>

请注意，我已经为当前页面和每页项目计数取了两个隐藏的var。现在我已经写了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（）和callPrevi（）这两个函数，因为我必须为它写定义。

请耐心等待我学习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/