2017-03-29 84 views
0

我有一個問題。我需要改變jquery bootgrid插件,以便允許多重魔咒。 I.E.如果用戶發送像['top-left','bottom-left']這樣的參數數組,bootgrid必須同時在bootgrid表的頂部和左下角分頁。jquery bootgrid插件雙分頁

我創造了這個方法,在這裏我將它們添加但只能在同一行中添加2的可能性,它在上面創建空的分頁格但在底部DIV

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

我打電話插入2個paginations這樣

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

而且繼承人的方法是方法是通過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", "«", "first") 
        ._bgEnableAria(current > 1); 
       renderPaginationItem.call(this, pagination, "prevPage", "<", "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有多個分頁,一個在頂部,一個在底部

+0

[鏈接](http://prntscr.com/epv2pj)以下是我在開發工具獲得,頂頁腳是充滿分頁項目和底部有一個是有,但空 – Edin

回答

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