1

我正在寻找一个 jquery 分页插件来为我的网页上的内容启用分页,我发现 jqPagination 是一个非常好的插件。但是我有一个用例,我需要使用插件 UI 的多个实例来控制同一网页上的不同内容组,以下是我如何使用插件的演示。正如 javascript 代码所示,我需要的第二个参数是触发回调的 jquery 对象。原因是当前页码作为回调的单个参数不允许我判断两个实例中的哪一个是事件源,因此我无法控制相关的内容组。

    <p>First</p>
    <div id="111" class="pagination">
        <a href="#" class="first" data-action="first">&laquo;</a>
        <a href="#" class="previous" data-action="previous">&lsaquo;</a>
        <input type="text" readonly="readonly" />
        <a href="#" class="next" data-action="next">&rsaquo;</a>
        <a href="#" class="last" data-action="last">&raquo;</a>
    </div>

    <p>Second</p>
    <div id="222" class="pagination">
        <a href="#" class="first" data-action="first">&laquo;</a>
        <a href="#" class="previous" data-action="previous">&lsaquo;</a>
        <input type="text" readonly="readonly" />
        <a href="#" class="next" data-action="next">&rsaquo;</a>
        <a href="#" class="last" data-action="last">&raquo;</a>
    </div>

Javascript:

    <script>
        $(function() {
            $('.pagination').jqPagination({
                max_page: 99,
                page_string: "Deployment {current_page} / {max_page}",
                paged: function(page, jqObject) {
                    console.log("page - " + page + "\njqObject.outerHTML = " + JSON.stringify(jqObject.outerHTML, null, 4) + "\n\n")
                }
            });     
        });
    </script>

我查看了插件源代码,发现将 base.el 作为第二个参数传递可能是解决我的问题的快速解决方案。但我想知道这是否值得放入 github 上的 jqPagination 项目中,以防其他人有类似的需求。谢谢!

    // ATTN this isn't really the correct name is it?
    base.updateInput = function (prevent_paged) {

        var current_page = parseInt(base.options.current_page, 10);

        // set the input value
        base.setInputValue(current_page);

        // set the link href attributes
        base.setLinks(current_page);

        // we may want to prevent the paged callback from being fired
        if (prevent_paged !== true) {

            // fire the callback function with the current page
            base.options.paged(current_page, base.el);

        }

    };
4

0 回答 0