Jquery bootgrid插件双重分页

时间:2017-03-29 10:58:41

标签: javascript jquery pagination

我有一个问题。我需要更改jquery bootgrid插件,以便允许多次magination。 I.E.如果用户发送的参数数组如[&#39;左上角&#39;,&#39;左下角&#39;],则bootgrid必须在bootgrid表的顶部和左下角都有分页。< / p>

我创建了这个方法,我添加它们但是只有在同一行中添加2的可能性,它在顶部创建空的分页div但在底部div中插入2个分页

    Grid.prototype.setPaginationBar = function (params) {
            if (params[0] == "top-left") {
                $('.table-responsive').prepend(this.footer);
                var bar = $('.paginationBar');
                $(bar).insertBefore('.infoBar');
                $(bar).addClass('paginationBarLeft');
                $(bar).removeClass('paginationBar');
            }
            else if (params[0] == "top-right") {
                $('.table-responsive').prepend(this.footer);
            }
            else if (params[0] == "bottom-left") {
                var bar = $('.paginationBar');
                $(bar).insertBefore('.infoBar');
                $(bar).addClass('paginationBarLeft');
                $(bar).removeClass('paginationBar');
            }

            this.header = this.footer.clone();
            $('.table-responsive').prepend(this.header);
    };

我称之为

的方法
        var params = ['bottom-right', 'bottom-left'];
        $("#employee_grid").bootgrid("setPaginationBar", params);

而heres是我的方法之后的bootgrid调用的方法

    function renderPagination() {
        if (this.options.navigation !== 0) {
            var selector = getCssSelector(this.options.css.pagination),
                headerPagination = this.header.find(selector)._bgShowAria(this.rowCount !== -1),
                footerPagination = this.footer.find(selector)._bgShowAria(this.rowCount !== -1);
            if (this.rowCount !== -1 && (headerPagination.length + footerPagination.length) > 0) {
                var tpl = this.options.templates,
                    current = this.current,
                    totalPages = this.totalPages,
                    pagination = $(tpl.pagination.resolve(getParams.call(this))),
                    offsetRight = totalPages - current,
                    offsetLeft = (this.options.padding - current) * -1,
                    startWith = ((offsetRight >= this.options.padding) ?
                        Math.max(offsetLeft, 1) :
                        Math.max((offsetLeft - this.options.padding + offsetRight), 1)),
                    maxCount = this.options.padding * 2 + 1,
                    count = (totalPages >= maxCount) ? maxCount : totalPages;

                renderPaginationItem.call(this, pagination, "first", "&laquo;", "first")
                    ._bgEnableAria(current > 1);
                renderPaginationItem.call(this, pagination, "prevPage", "&lt;", "prevPage")
                    ._bgEnableAria(current > 1);

                for (var i = 0; i < count; i++) {
                    var pos = i + startWith;
                    renderPaginationItem.call(this, pagination, pos, pos, "page-" + pos)
                        ._bgEnableAria()._bgSelectAria(pos === current);
                }

                if (count === 0) {
                    renderPaginationItem.call(this, pagination, 1, 1, "page-" + 1)
                        ._bgEnableAria(false)._bgSelectAria();
                }

                renderPaginationItem.call(this, pagination, "nextPage", "&gt;", "nextPage")
                    ._bgEnableAria(totalPages > current);
                renderPaginationItem.call(this, pagination, "last", "&raquo;", "last")
                    ._bgEnableAria(totalPages > current);

                replacePlaceHolder.call(this, headerPagination, pagination, 1);
                replacePlaceHolder.call(this, footerPagination, pagination, 2);
                //Pagination ADA fix
                paginationADA();
            }
        }
    }

如果有人能帮助我,我会非常感激,因为我无法弄清楚如何让bootgrid有多个分页,一个在顶部,一个在底部

1 个答案:

答案 0 :(得分:0)

通过在网格初始化后调用方法来解决问题......

    }).on("loaded.rs.jquery.bootgrid", function () {
        /* Executes after data is loaded and rendered */
        var params = ['top-right', 'bottom-right'];
        $("#employee_grid").bootgrid("setPaginationBar", params);
        Ladda.stopAll();
        //Delete