不带插件的Jquery分页创建

您好，我正在利用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>

1.
2.
3.
一个
两个
三
4.
5.
6.
7.
8.
9
40
50
60
4000
5000
6000
42
52
62

请注意，我已经为当前页面和每页项目计数设置了两个隐藏变量。现在我已经编写了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');
                    }


    });

$（文档）.ready（函数（）{
调试器；
var显示每页的值=3；
var number_of_items=$（'#paginate tr'）。size（）；
var number_of_pages=Math.ceil（每页显示的项目数）；
$（'当前页面'）.val（1）；
$（'show#u per_page'）.val（show_per_page）；
var navigation_html=''+''；
无功电流_链路=1；
while（页数>当前链接）{
导航html+='''+''；
当前链接++；
}
导航_html+=''；
$（'page_navigation'）.html（navigation_html）；
$（'#paginate tr'）.css（'display'，'none'）；
对于（变量i=0；i

它正在工作并创建了分页条，但现在我不知怎么搞不懂如何处理next（）和callPrev（）这两个函数，因为我必须为它编写定义

在我学习jquery时，请耐心听我说。 谢谢。

试试这个：

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

演示：

---

建议在页面链接上使用

slice（）

以及一些

数据-

属性，以帮助过滤回复感谢。我的问题是创建下一个函数和callPrev函数。请您详细说明一下您的意思。类似这样的内容：感谢charlietfl的工作。“页面”是什么作为参数传递给makepager函数@RahulChaudhari，当前页码将作为参数传递给showPage（）函数，在showPage（）函数中，我们将使用当前页码作为参数调用makePager（）函数。