2014-07-25 11 views
11

Utilizzo il plug-in TwbsPagination per visualizzare il paging nella mia app. Funziona bene quando impostiamo le dimensioni della pagina durante l'inizializzazione. Tuttavia, in base al risultato della ricerca, voglio reimpostare il numero totale di pagine.Reimposta le pagine totali nel plugin di impaginazione jQuery

Quando provo utilizza

$('#pagination').twbsPagination({totalPages:10}); 

esso non reimposta le pagine totali visualizzate.

+0

una buona domanda ..... –

risposta

3

Ah, sono riuscito a ottenere questo lavoro in un modo diverso. Dal momento che sto usando questo in congiunzione con JQGrid, ho scelto l'evento loadComplete per correggere il mio codice. Qui va passaggi:

1.Creare un DIV a premere i pulsanti di paging (di twbs controllo)

<div id="paginationholder"></div> 

2.Crated una variabile js locale per tenere pagina corrente

var currentPage=1; 

3 numero di pagina .Update prima di AJAX di jqGrid

beforeRequest: function() { 
    var postData = grid.jqGrid('getGridParam', "postData"); 
    postData.page = currentPage; 
    postData.rows = $("#rows").val(); 
} 

4.Rebuild il controllo impaginazione su loadComplete. Quando l'utente fa clic su una pagina, sto aggiornando il numero di pagina (currentPage) e ricarico la griglia.

loadComplete: function (data) { 
    $('#paginationholder').html(''); 
    $('#paginationholder').html('<ul id="pagination" class="pagination-sm"></ul>'); 
    $('#pagination').twbsPagination({ 
     startPage: data.page, 
     totalPages: data.total, 
     visiblePages: 5, 
     onPageClick: function (event, page) { 
      currentPage = page; 
      grid.trigger('reloadGrid'); 
     } 
    }); 
} 
13

Sono di fronte allo stesso problema, ero in cerca di soluzioni ma non ho trovato nulla. Quindi, dopo aver analizzato il codice dello script, mi rendo conto che questo script utilizza il metodo .data() per salvare lo stato di visualizzazione dell'impaginazione e sono riuscito a farlo esplicitamente.

.data(): archiviare dati arbitrari associati agli elementi corrispondenti o restituire il valore nell'archivio dati denominato per il primo elemento nel set di elementi corrispondenti. rif: http://api.jquery.com/data/

Soluzione per reimpostare l'impaginazione.

si solo bisogno di chiamare prima del vostro "rendering lista" O funciion "Associazione dei dati"/metodo

$ ('# impaginazione') vuota().;

$ ('#paginazione'). RemoveData ("twbs-pagination");

$ ('#paginazione'). Unbind ("pagina");

e questo ripristinerà i dati di stato della paginazione. ("twbs-pagination" è il tasto stato vista).

Spero che questo aiuti.

+2

Grazie per questo tweak. :) – Fahim

+0

risparmi i miei giorni :) –

+0

Questa è la più degna promozione che abbia mai dato a – user3284463

2

È possibile utilizzare destroy. Vedi here.

Quindi:

$('#pagination').twbsPagination('destroy');

quindi reinizializzare esso:

$('#pagination').twbsPagination({totalPages:5});

Fiddle

0

leggere il codice sorgente twbs-pagination

here dice il motivo per cui non siete riusciti a ripristinare la pagina totale: esiste

var data = $this.data('twbs-pagination'); 

    if (!data) $this.data('twbs-pagination', (data = new TwbsPagination(this, options))); 

ViewState param twbs-impaginazione, quindi non si può ri-renderizzare.

here è la soluzione per eliminare viewstate:

TwbsPagination.prototype = { 

    destroy: function() { 
     this.$element.empty();//remove child nodes 
     this.$element.removeData('twbs-pagination');//remove viewstate 
     this.$element.off('page');//unbind $(this) node from page 
     return this; 
    }, 

così si può chiamare destroy metodo @Robin Carlo Catacutan

O eseguire manualmente il metodo interno @Vipin Kohli

Problemi correlati